Angular2禁用按钮

Question

我知道在 angular2 中，我可以使用 [disable] 属性禁用按钮，例如：

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

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

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

谢谢。

原文由 Nir Schwartz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新

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

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

您尝试的问题在下面解释

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

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

在这里演示

原文由 Pankaj Parkar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我会推荐以下内容。

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

原文由 Proximo 发布，翻译遵循 CC BY-SA 3.0 许可协议