Angular2禁用button

我知道在angular2中我可以禁用一个带有[disable]属性的button，例如：

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

但我可以用[ngClass]或[ngStyle]吗？ 像这样：

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

谢谢。

Answer 1

更新

我在想。 你为什么不想使用Angular 2提供的[disabled]属性绑定？ 这是处理这种情况的正确方法。 我build议你通过组件方法移动你的isValid检查。

 isValidForm() { return this.isValid; } <button [disabled]="!isValidForm()" (click)="onConfirm()">Confirm</button> 

您尝试解决以下问题

基本上你可以在这里使用ngClass 。 但是添加类不会限制事件发生。 对于有效input引发事件，您应该将click事件代码更改为以下。 所以onConfirm只有在字段有效时才会被触发。

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

在这里演示

Answer 2

我会build议以下。

 <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

如果你有一个表单，那么以下也是可能的：

 <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

Answer 5

我尝试使用与单击事件一起禁用。 下面是摘录，接受的答案也工作得很好，我join这个答案举个例子，如何使用禁用和点击属性。

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

Answer 6

如果您使用的是反应forms，并且希望禁用与窗体控件关联的某些input，则应该将此disabled逻辑放入代码中，并调用yourFormControl.disable()或yourFormControl.enable()