Angular2 禁用按钮 [英] Angular2 disable button

问题描述

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

I know that in angular2 I can disable a button with the [disable] attribute, for example:

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

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

but can I do it using [ngClass] or [ngStyle] ? Like so:

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

谢谢.

推荐答案

更新

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

Update

I'm wondering. Why don't you want to use the [disabled] attribute binding provided by Angular 2? It's the correct way to dealt with this situation. I propose you move your isValid check via component method.

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

下面解释了您尝试的问题

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

The Problem with what you tried explained below

Basically you could use ngClass here. But adding class wouldn't restrict event from firing. For firing up event on valid input, you should change click event code to below. So that onConfirm will get fired only when field is valid.

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

此处演示

这篇关于Angular2 禁用按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！