Я знаю, що в 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;
}