web-dev-qa-db-fra.com

Bouton de désactivation angulaire2

Je sais que dans angular2, je peux désactiver un bouton avec l'attribut [disable], par exemple:

_<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>
_

mais puis-je le faire en utilisant [ngClass] ou [ngStyle]? Ainsi:

_<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>
_

Merci.

htmlangularangular2-templateangular2-forms
102
Nir Schwartz

Mettre à jour

Je me demande. Pourquoi ne voulez-vous pas utiliser la liaison d'attribut [disabled] fournie par Angular 2? C'est la bonne façon de gérer cette situation. Je vous propose de déplacer votre vérification isValid via la méthode du composant.

<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>

Le problème avec ce que vous avez essayé expliqué ci-dessous

Fondamentalement, vous pouvez utiliser ngClass ici. Mais l’ajout de la classe n’empêcherait pas les événements de se déclencher. Pour déclencher un événement sur une entrée valide, vous devez remplacer le code d'événement click par le suivant. Pour que onConfirm ne soit déclenché que lorsque le champ est valide.

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

Démo ici

153
Pankaj Parkar

Je recommanderais le suivant.

<button [disabled]="isInvalid()">Submit</button>
40
Proximo

Oui, vous pouvez

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
 </div>

https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

7
Sasikumar D.R.

Si vous avez un formulaire, ce qui suit est également possible:

<form #f="ngForm">
    <input name="myfield" type="text" minlenght="3" required ngModel>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

Démo ici: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

6
Raptor

L'utilisation de ngClass pour désactiver le bouton pour formulaire non valide n'est pas une bonne pratique dans Angular2 lorsque celle-ci fournit des fonctionnalités intégrées permettant d'activer et de désactiver le bouton si le formulaire est valide et non valide, sans aucun effort supplémentaire/logique.

[disabled] fera tout comme si le formulaire est valide, il sera activé et si le formulaire est invalide, il sera automatiquement désactivé.

Voir Exemple:

<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">
5
Slack

Peut-être que le code ci-dessous peut aider:

<button [attr.disabled]="!isValid ? true : null">Submit</button>
3
Shivang Gupta

J'ai essayé d'utiliser disabled avec click event. Ci-dessous l'extrait de code, la réponse acceptée a également parfaitement fonctionné. J'ajoute cette réponse pour donner un exemple d'utilisation possible avec les propriétés disabled et click.

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>
2
pritesh agrawal

Je pense que c'est le moyen le plus simple

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
2
Gouk

Si vous utilisez des formulaires réactifs et souhaitez désactiver certaines entrées associées à un contrôle de formulaire, vous devez placer cette logique disabled dans votre code et appeler yourFormControl.disable() ou yourFormControl.enable().

2
Sergey P. aka azure
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.ts code

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
1
Amir Twito