Angular2禁用按钮

Question

我知道在angular2中我可以禁用具有该[disable]属性的按钮 ,例如:

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

但我可以做到这一点使用[ngClass]或[ngStyle]？像这样:

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

谢谢.

Answer 1

更新

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

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

您尝试过的问题如下所述

基本上你可以ngClass在这里使用.但是添加类不会限制事件被触发.要在有效输入上启动事件,您应该将click事件代码更改为以下.因此onConfirm只有当字段有效时才会被触发.

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

在这里演示

Answer 2

我会推荐以下内容.

<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

使用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="">