Я знаю, что в 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>

Я пробовал использовать disabled вместе с событием щелчка. Ниже приведен фрагмент, принятый ответ также работал отлично, я добавляю этот ответ, чтобы дать пример того, как его можно использовать с отключенными свойствами и свойствами щелчка.

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