質問

私は angular2 でボタンを無効化できることは知っています。 [disable] 属性を使って、例えば

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

を使うことができますが [ngClass] または [ngStyle] ? みたいな感じで。

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

ありがとうございます。

どのように解決するのですか？

更新情報

不思議に思っていることがあります。なぜ [disabled] 属性バインディングを使用しないのでしょうか？それは、この状況に対処する正しい方法です。私は、あなたの isValid をコンポーネントメソッドでチェックすることを提案します。

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

あなたが試したことの問題点を以下に説明します。

基本的には ngClass を使うことができます。しかし、クラスを追加しても、イベントの発生を制限することはできません。有効な入力があったときにイベントを発生させるには click イベントのコードを以下のように変更してください。つまり onConfirm はフィールドが有効なときのみ発生します。

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

デモはこちら