Ich weiß das in angle2 eine Schaltfläche mit dem [disable]Attribut deaktivieren kann , zum Beispiel:

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

aber kann ich es mit [ngClass]oder machen[ngStyle] ? Wie so:

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

Vielen Dank.

Aktualisieren

Ich frage mich. Warum möchten Sie nicht [disabled]die von Angular 2 bereitgestellte Attributbindung verwenden? Es ist der richtige Weg, um mit dieser Situation umzugehen. Ich schlage vor, Sie verschieben Ihren isValidScheck über die Komponentenmethode.

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

Das Problem mit dem, was Sie versucht haben, wird unten erklärt

Grundsätzlich könnte man ngClasshier verwenden. Das Hinzufügen einer Klasse würde das Auslösen des Ereignisses jedoch nicht einschränken. Um ein Ereignis bei einer gültigen Eingabe auszulösen, sollten Sie den clickEreigniscode wie folgt ändern . Das onConfirmwird also nur ausgelöst, wenn das Feld gültig ist.

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

Demo hier

Ich würde folgendes empfehlen.

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

Ja, du kannst

<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

Wenn Sie ein Formular haben, ist auch Folgendes möglich:

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

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

Verwenden von ngClass Deaktivieren der Schaltfläche für ungültiges Formular ist in Angular2 keine gute Vorgehensweise, wenn integrierte Funktionen zum Aktivieren und Deaktivieren der Schaltfläche bereitgestellt werden, wenn das Formular gültig bzw. ungültig ist, ohne dass zusätzliche Anstrengungen / Logik erforderlich sind.

[disabled] Wenn das Formular gültig ist, wird es aktiviert und wenn das Formular ungültig ist, wird es automatisch deaktiviert.

Siehe Beispiel:

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

Möglicherweise kann der folgende Code helfen:

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

Ich habe versucht, deaktiviert zusammen mit Klickereignis zu verwenden. Unten ist das Snippet, die akzeptierte Antwort hat auch einwandfrei funktioniert. Ich füge diese Antwort hinzu, um ein Beispiel zu geben, wie sie mit deaktivierten und Klick-Eigenschaften verwendet werden kann.

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

Wenn Sie reaktive Formulare verwenden und einige mit einem Formularsteuerelement verknüpfte Eingaben deaktivieren möchten, sollten Sie diese disabledLogik in Ihren Code einfügen und yourFormControl.disable()oder aufrufenyourFormControl.enable()

Ich denke, das ist der einfachste Weg

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