Wiem, że w angular2 mogę wyłączyć przycisk z [disable]atrybutem np:

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

ale czy mogę to zrobić za pomocą [ngClass]lub [ngStyle]? Tak jak to:

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

Dzięki.

Aktualizacja

Zastanawiam się. Dlaczego nie chcesz użyć [disabled]powiązania atrybutów dostarczonego przez Angular 2? To właściwy sposób radzenia sobie z tą sytuacją. Proponuję przenieść isValidczek metodą komponentów.

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

Problem z tym, co próbowałeś, został wyjaśniony poniżej

Zasadniczo możesz użyć ngClasstutaj. Ale dodanie klasy nie uniemożliwiłoby wystrzelenia zdarzenia. Aby uruchomić zdarzenie przy poprawnym wejściu, powinieneś zmienić clickkod zdarzenia na poniżej. Więc to onConfirmzostanie uruchomione tylko wtedy, gdy pole jest prawidłowe.

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

Demo tutaj

Poleciłbym następujące.

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

tak, możesz

<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

Jeśli masz formularz, możliwe jest również:

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

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

Użycie ngClassdo wyłączenia przycisku dla nieprawidłowego formularza nie jest dobrą praktyką w Angular2, gdy zapewnia on wbudowane funkcje włączania i wyłączania przycisku, jeśli formularz jest prawidłowy i nieprawidłowy, bez wykonywania dodatkowych wysiłków / logiki.

[disabled] zrobi wszystko, na przykład jeśli formularz jest ważny, zostanie włączony, a jeśli formularz jest nieprawidłowy, zostanie automatycznie wyłączony.

Zobacz przykład:

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

Może pomóc poniższy kod:

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

Próbowałem używać wyłączonych razem ze zdarzeniem kliknięcia. Poniżej znajduje się fragment, zaakceptowana odpowiedź również działała idealnie, dodaję tę odpowiedź, aby dać przykład, jak można jej używać z wyłączonymi i kliknięciami właściwości.

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

Jeśli używasz formularzy reaktywnych i chcesz wyłączyć niektóre dane wejściowe powiązane z kontrolką formularza, powinieneś umieścić tę disabledlogikę w swoim kodzie i wywołać yourFormControl.disable()lubyourFormControl.enable()

Myślę, że to najłatwiejszy sposób

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

setStyles() 
{
    let styles = {

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