Angular2禁用按钮


113

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

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

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

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

谢谢。


Answers:


173

更新资料

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

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

您尝试过的问题在下面说明

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

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

在这里演示


好吧,我在按钮中添加了ngClass,所以在我看来需要禁用,为什么更喜欢[disabled]方式?
尼尔·施瓦茨

@NirSchwartz,因为它会同时做两件事。.选择器css规则将应用于基于button[disabled]选择器的&禁用事件将限制click事件在按钮上启动..在ngClass类中,您需要自己处理它,如我所示以上答案..
Pankaj Parkar '16

人们之所以要使用[attr.disabled]而不是[disabled],是因为无法动态设置angular FormControl的[disabled]。这是问题github.com/angular/angular/issues/11271
davyzhang

1
您不应在模板绑定中调用方法。[disabled]="!isValid"
汤姆(Tom)

3
Ahhaa ..如果方法只有一个变量引用,则很好。如果您在函数中具有复杂的逻辑,则不建议使用。您是正确的,在这种情况下,我可以直接isValid在用户界面上调用flag
Pankaj Parkar,

39

我建议以下。

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

4
避免在html中调用函数不是更好,因为每个刻度/周期都会调用它吗?
约翰



5

ngClass在Angular2中使用禁用按钮来禁用无效表单不是一个好习惯,因为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="">


3

可能下面的代码可以帮助您:

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

这不是因为一个好的解决办法<button disabled=""><button disabled="false">在大多数浏览器如被禁用按钮仍然处理
BillyTom

2

我尝试使用禁用和点击事件。下面是代码段,可接受的答案也很好用,我添加了此答案以给出一个示例,说明如何将其与禁用和单击属性一起使用。

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

2

如果您使用反应式表单,并且想禁用与表单控件相关的某些输入,则应将此disabled逻辑放入代码中,然后调用yourFormControl.disable()yourFormControl.enable()


2

我认为这是最简单的方法

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

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

.ts代码

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.