html - Angular2 無効化ボタン

Question

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

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

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

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

ありがとう。

Answer 1

アップデート

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

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

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

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

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

デモはこちら

Answer 2

以下をお勧めします。

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

Answer 3

はい、できます

<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

Answer 4

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