html – Angular2禁用按钮

前端之家收集整理的这篇文章主要介绍了html – Angular2禁用按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道在angular2我可以禁用一个按钮
[disable]属性,例如:
<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

但是我可以使用[ngClass]还是[ngStyle]?像这样:

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

谢谢。

解决方法

更新

我想知道,为什么你不想使用angular2提供的[disabled]属性绑定?处理这种情况的正确方法。我会建议你通过组件方法移动你的isValid检查。

isValidForm() {
    return this.isValid;
}

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

您尝试解释的问题如下

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

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

Demo Here

猜你在找的HTML相关文章