Ответ 1

Обновление

Мне интересно. Почему вы не хотите использовать привязку атрибута [disabled], предоставляемую Angular 2? Это правильный способ справиться с этой ситуацией. Я предлагаю вам перенести проверку isValid с помощью метода компонентов.

isValidForm() {
    return this.isValid;
}

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

Проблема с тем, что вы пытались объяснить ниже

В принципе вы можете использовать ngClass здесь. Но добавление класса не ограничивало бы событие при стрельбе. Для включения события на действительном входе вам следует изменить код события click ниже. Так что onConfirm будет запущен только тогда, когда поле действительно.

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

Демо здесь

Ответ 2

Я бы рекомендовал следующее.

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

Ответ 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

Ответ 4

Если у вас есть форма, возможно также следующее:

<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

Ответ 5

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

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

Ответ 6

Если вы используете реактивные формы и хотите отключить некоторый ввод, связанный с элементом управления формой, вы должны поместить эту логику disabled в код и вызвать yourFormControl.disable() или yourFormControl.enable()