angular2[disable]では、次のような属性を持つボタンを無効にできることを知っています 。

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

しかし、[ngClass]またはを使用してそれを行うことができ[ngStyle]ますか？そのようです：

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

ありがとう。

更新

不思議なんだけど。[disabled]Angular 2が提供する属性バインディングを使用したくないのですか？これは、この状況に対処する正しい方法です。isValidチェックをコンポーネントメソッドで移動することをお勧めします。

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

あなたが試したものの問題は以下で説明されています

基本的にngClassここで使用できます。ただし、クラスを追加しても、イベントの発生は制限されません。有効な入力でイベントを発生させるには、clickイベントコードを以下に変更する必要があります。そのonConfirmため、フィールドが有効な場合にのみ発生します。

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

デモはこちら

以下をお勧めします。

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

はい、できます

<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

フォームがある場合は、次のことも可能です。

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

ここのデモ：http : //plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

使用してngClass無効に無効なフォームのボタンと、その提供する作り付けのが有効とフォームが余分な努力/ロジックを実行することなく、それぞれ有効と無効の場合は、ボタンを無効にする機能Angular2では良い方法ではありません。

[disabled] フォームが有効な場合は有効になり、フォームが無効な場合は自動的に無効になるなど、すべての処理を行います。

例を参照してください：

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

以下のコードが役立ちます：

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

クリックイベントと一緒に無効にしてみました。以下はスニペットです。承認された回答も問題なく機能しました。無効にしたプロパティとクリックプロパティで使用する例を示すために、この回答を追加します。

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

リアクティブフォームを使用していて、フォームコントロールに関連付けられている一部の入力を無効にする場合は、このdisabledロジックをコードに配置して、yourFormControl.disable()またはyourFormControl.enable()

これが一番簡単な方法だと思います

<!-- 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コード

setStyles() 
{
    let styles = {

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