小开

你可以的

<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

小开

最佳答案

更新

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

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

您所尝试的问题在下面解释

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

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

演示在这里

小开

我建议采取以下措施。

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

小开

I tried using disabled along with click event. Below is the snippet , the accepted answer also worked perfectly fine , I am adding this answer to give an example how it can be used with disabled and click properties.

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

小开

如果你有一个表格，那么以下内容也是可能的:

<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

小开

如果您正在使用反应式表单，并且希望禁用与表单控件相关联的某些输入，则应将此 disabled逻辑放入代码中并调用 yourFormControl.disable()或 yourFormControl.enable()

小开

在 Angular2中，使用 ngClass禁用无效表单的按钮并不是一个好的做法，因为 Angular2提供了一些内置功能，可以在表单有效和无效的情况下分别启用和禁用按钮，而不需要做任何额外的工作/逻辑。

[disabled] will do all thing like if form is valid then it will be enabled and if form is invalid then it will be disabled automatically.

See Example:

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

小开

可能以下代码可以帮助:

<button [attr.disabled]="!isValid ? true : null">Submit</button>

小开

 <button [disabled]="this.model.IsConnected() == false"
[ngClass]="setStyles()"
class="action-button action-button-selected button-send"
(click)= "this.Send()">
SEND
</button>

.ts code

setStyles()
{
let styles = {


'action-button-disabled': this.model.IsConnected() == false
};
return styles;
}

小开

我觉得这是最简单的方法

<!-- Submit Button-->
<button
mat-raised-button
color="primary"
[disabled]="!f.valid"
>
Submit
</button>

Angular2禁用按钮

更新

您所尝试的问题在下面解释