【问题标题】：Angular2 disable buttonAngular2禁用按钮
【发布时间】：2016-06-02 19:11:33
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

这里正在为相同的plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview工作 plnkr

标签： html angular angular2-template angular2-forms

【解决方案1】：

更新

我想知道。为什么不想使用 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

【讨论】：

好吧，我已经在按钮中添加了 ngClass，所以在我看来，禁用需要在那里，为什么首选 [禁用] 方式？
@NirSchwartz 因为它会同时做这两件事.. 选择器 css 规则将应用于 button[disabled] 基于选择器和禁用事件将限制 click 事件在按钮上触发.. 在ngClass 类的东西，你需要自己处理，如我在上面的答案中所示..
人们之所以要使用[attr.disabled]而不是[disabled]是因为angular FormControl的[disabled]不能动态设置。这是问题github.com/angular/angular/issues/11271
您不应该在模板绑定中调用方法。 [disabled]="!isValid"
啊哈.. 如果方法只有一个变量引用，那很好.. 如果函数内部有复杂的逻辑，那么它不是首选。你是对的，这种情况下我可以直接在 UI 上调用isValid 标志

【解决方案2】：

我会推荐以下。

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

【讨论】：

在html中避免函数调用不是更好吗，因为它会在每个tick/cycle被调用？

【解决方案3】：

是的，你可以

<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

【讨论】：

【解决方案4】：

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

<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

【讨论】：

【解决方案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="">

【讨论】：

【解决方案6】：

下面的代码可能会有所帮助：

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

【讨论】：

这不是一个好的解决方案，因为 <button disabled=""> 或 <button disabled="false"> 在大多数浏览器中仍然像禁用按钮一样处理

【解决方案7】：

我尝试使用 disabled 和 click 事件。下面是 sn-p ，接受的答案也很好用，我添加这个答案是为了举例说明它如何与禁用和单击属性一起使用。

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我认为这是最简单的方法

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

【讨论】：

【解决方案10】：

 <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;
}

【讨论】：