1
votes

Bouton angulaire 9 désactivé lorsque rien n'est sélectionné dans la liste déroulante

J'essaye d'activer / désactiver un bouton dans Angular 9 lorsqu'aucune liste déroulante n'est sélectionnée.

dashboard.html.ts:

<div class="form-group">
     <label for="inputCollaborateur">Collaborateur</label>
     <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" required>
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
     </select>
</div>

<button type="button" class="btn btn-primary" (click)="enregistrerCreation()">Ajouter</button>

J'ai essayé en utilisant ceci dans le code du bouton ng-disabled = "! edit.collaborateur mais cela ne fonctionne pas ...

angular angular-ngmodel

1 commentaires

Par "non sélectionné", voulez-vous dire que la liste déroulante affiche la première valeur de collaborateurs ?

4 Réponses :

1
votes

Veuillez essayer:

<button type="button" class="btn btn-primary" [disabled]="!edit.collaborateur" (click)="enregistrerCreation()">Ajouter</button>

Cela fonctionne-t-il pour vous?

0 commentaires

1
votes

Ajoutez une variable de référence de modèle sur l'élément select et affectez ngControl comme suit. Utilisez ensuite la variable de référence du modèle pour vérifier la validation de l'entrée.

 <div class="form-group">
        <label for="inputCollaborateur">Collaborateur</label>
        <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" required #collaboreurRef="ngModel">
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
        </select>
  </div>

<button type="button" class="btn btn-primary" [disabled]="collaboreurRef.invalid" (click)="enregistrerCreation()" >Ajouter</button>

9 commentaires

ça ne marche pas, ça ne désactive pas le bouton ...

Je voudrais mais compliqué avec tout ce que j'ai dans les fichiers et le code que j'ai dans les fichiers et je n'en ai jamais créé un ....

J'ai essayé dans ce stackblitz que cela fonctionne bien: stackblitz.com/ modifier /…

stackblitz.com/edit/angular-ivy-61bahu voici le mien mais de nombreuses erreurs sont dues à la librairie

cela fonctionne avec vous parce que vous mettez une fonction compareFn. si je le supprime, cela ne fonctionne pas.

Il est recommandé d'avoir une fonction de comparaison si vous utilisez l'attribution d'objet à l'attribut value, angular.io / api / forms /…

ok, j'ai fait la même chose mais toujours en activant le bouton

continuons cette discussion dans le chat .

je pense que c'est parce que vous n'avez pas de données dynamiques. mon '[(ngModel)] = "edit.collaborateur"' et '[ngValue] = "collaborateur"' alors comment puis-je le faire correspondre avec votre pays2 dans votre exemple?

1
votes

Essayez ceci:

<button type="button" class="btn btn-primary" [disabled]="(!edit.collaborateur || edit.collaborateur === '' )" 
 (click)="enregistrerCreation()">Ajouter</button>

4 commentaires

Ou vous pouvez essayer de vérifier les données avec (ngModelChange) = "onChange ($ event)" en html, puis vérifier l'activation / la désactivation dans le fichier TS

avez-vous un exemple pour le '(ngModelChange) = "onChange ($ event)'?

Je pense que vous avez un problème ailleurs dans le code parce que l'une de ces méthodes devait fonctionner. Avez-vous un exemple de ces codes?

Essayez ceci aussi [disabled] = "(collaboreurRef.invalid ||! Edit.collaborateur || edit.collaborateur === '')" Sinon, vous devriez revoir votre code si toutes les données arrivent correctement. Bonne chance!

0
votes

Je suggérerais simplement de cocher la case pour sélectionner la balise. Vous pouvez utiliser le gestionnaire d'événement de modification pour ce cas.

disabled:boolean = true;


ngOnInit() {
    check_for_disable();
}


check_for_disable() {
    if(this.edit?.collaborateur !== "") this.disabled = false;
}

fonction dans le fichier ts

<div class="form-group">
     <label for="inputCollaborateur">Collaborateur</label>
     <select class="form-control" [(ngModel)]="edit.collaborateur" id="inputCollaborateur" name="inputCollaborateur" (change)="check_for_disable()" required>
          <option *ngFor='let collaborateur of collaborateurs' [ngValue]="collaborateur">{{collaborateur.matricule}} - {{collaborateur.nom}} {{collaborateur.prenom}}</option>
     </select>
</div>

<button type="button" class="btn btn-primary" (click)="enregistrerCreation()" [disabled]="disabled">Ajouter</button>

0 commentaires