Angular2禁用按钮

时间:2016-02-21 11:12:09

标签: html angular angular2-template angular2-forms

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

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

但是我可以使用 [ngClass] [ngStyle] 来执行此操作吗?像这样:

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

感谢。

10 个答案:

答案 0 :(得分:147)

更新

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

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

您在下面解释的问题

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

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

Demo Here

答案 1 :(得分:39)

我会推荐以下内容。

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

答案 2 :(得分:7)

是的,你可以

<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

答案 3 :(得分:6)

如果您有表格,则还可以使用以下内容:

<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

答案 4 :(得分: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="">

答案 5 :(得分:3)

可能在代码下方可以提供帮助:

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

答案 6 :(得分:2)

我尝试使用禁用以及点击事件。下面是片段,接受的答案也完美无缺,我正在添加这个答案,举例说明它如何与禁用和点击属性一起使用。

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

答案 7 :(得分:2)

如果您使用的是被动表单并希望禁用与表单控件关联的某些输入,则应将此disabled逻辑放入代码中并调用yourFormControl.disable()yourFormControl.enable()

答案 8 :(得分:2)

我认为这是最简单的方式

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

答案 9 :(得分:1)

'${Date a = Date.parse("yyyy-MM-dd-HH.mm.ss.","2018-15-05-23.59.59.999123");
        a.setTime(a.getTime()-1);
        a.format("yyyy-MM-dd-HH.mm.SSS999")}' 

.ts代码

'2018-15-05-23.59.58.999999'