Je sais que dans angular2 je peux désactiver un bouton avec l' [disable]attribut, 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.

Mettre à jour

Je me demande. Pourquoi ne souhaitez-vous pas utiliser la [disabled]liaison d'attribut fournie par Angular 2? C'est la bonne façon de gérer cette situation. Je vous propose de déplacer votre isValidchèque via la méthode des composants.

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

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

En gros, vous pouvez utiliser ngClassici. Mais l'ajout d'une classe n'empêcherait pas l'événement de se déclencher. Pour déclencher un événement sur une entrée valide, vous devez modifier le clickcode d'événement ci-dessous. Donc, cela onConfirmne sera déclenché que lorsque le champ est valide.

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

Démo ici

Je recommanderais ce qui suit.

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

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

Si vous avez un formulaire, alors 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

Utiliser ngClasspour désactiver le bouton pour le formulaire invalide n'est pas une bonne pratique dans Angular2 lorsqu'il fournit des fonctionnalités intégrées pour activer et désactiver le bouton si le formulaire est respectivement valide et invalide sans faire aucun effort / logique supplémentaire.

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

Voir l'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="">

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

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

J'ai essayé d'utiliser désactivé avec l'événement de clic. Ci-dessous, l'extrait de code, la réponse acceptée a également parfaitement fonctionné, j'ajoute cette réponse pour donner un exemple de la façon dont elle peut être utilisée avec les propriétés désactivées et cliquées.

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

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

Je pense que c'est le moyen le plus simple

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

 <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;
}