Angular2 禁用按钮

Question

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

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

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

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

谢谢。

Answer 1

是的，你可以

<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

Answer 2

更新

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

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

下面解释了您尝试的问题

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

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

Demo Here

Answer 3

我会推荐以下内容。

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

Answer 4

我尝试使用禁用和点击事件。下面是片段，接受的答案也工作得很好，我添加这个答案是为了举例说明它如何与禁用和单击属性一起使用。

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

Answer 5

如果您有表格，那么也可以使用以下表格：

<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

Answer 6

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

Answer 7

在 Angular2 中使用 ngClass 来禁用无效表单的按钮不是一个好习惯，因为它提供了内置功能，可以在表单有效和无效时分别启用和禁用按钮，而无需执行任何额外操作 efforts/logic.

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

Answer 8

可能下面的代码可以提供帮助：

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

Answer 9

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

Answer 10

我认为这是最简单的方法

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

Angular2 禁用按钮

Angular2 disable button

html

angular2-forms

angular2-template

angular

更新

下面解释了您尝试的问题