So che in angular2 posso disabilitare un pulsante con l' [disable]attributo, ad esempio:

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

ma posso farlo usando [ngClass]o [ngStyle]? Così:

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

Grazie.

Aggiornare

Mi sto chiedendo. Perché non vuoi utilizzare l' [disabled]attributo binding fornito da Angular 2? È il modo corretto per affrontare questa situazione. Ti propongo di spostare l' isValidassegno tramite il metodo dei componenti.

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

Il problema con ciò che hai provato è spiegato di seguito

Fondamentalmente potresti usare ngClassqui. Ma l'aggiunta di una classe non limita l'attivazione dell'evento. Per attivare l'evento su un input valido, è necessario modificare il clickcodice dell'evento in basso. Quindi onConfirmverrà attivato solo quando il campo è valido.

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

Demo qui

Suggerirei quanto segue.

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

si, puoi

<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

Se hai un modulo, è possibile anche quanto segue:

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

Demo qui: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

Usare ngClassper disabilitare il pulsante per la forma non valida non è una buona pratica in Angular2 quando fornisce funzionalità integrate per abilitare e disabilitare il pulsante se il modulo è valido e non valido rispettivamente senza fare alcuno sforzo / logica extra.

[disabled] farà tutto come se il modulo fosse valido, verrà abilitato e se il modulo non fosse valido verrà disabilitato automaticamente.

Vedi esempio:

<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="">

Può essere sotto il codice può aiutare:

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

Ho provato a utilizzare disabilitato insieme all'evento clic. Di seguito è riportato lo snippet, anche la risposta accettata ha funzionato perfettamente, aggiungo questa risposta per fornire un esempio di come può essere utilizzata con proprietà disabilitate e clic.

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

Se stai usando moduli reattivi e vuoi disabilitare alcuni input associati a un controllo modulo, dovresti inserire questa disabledlogica nel tuo codice e chiamare yourFormControl.disable()oyourFormControl.enable()

Penso che questo sia il modo più semplice

<!-- 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 codice

setStyles() 
{
    let styles = {

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