Html Angular2 禁用按钮

Angular2 disable button

提问by Nir Schwartz

I know that in angular2I can disable a button with the [disable]attribute, for example:

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

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

but can I do it using [ngClass]or [ngStyle]? Like so:

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

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

Thanks.

谢谢。

回答by Pankaj Parkar

Update

更新

I'm wondering. Why don't you want to use the [disabled]attribute binding provided by Angular 2? It's the correct way to dealt with this situation. I propose you move your isValidcheck via component method.

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

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

The Problem with what you tried explained below

您尝试的问题解释如下

Basically you could use ngClasshere. But adding class wouldn't restrict event from firing. For firing up event on valid input, you should change clickevent code to below. So that onConfirmwill get fired only when field is valid.

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

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

Demo Here

演示在这里

回答by Proximo

I would recommend the following.

我会推荐以下内容。

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

回答by Sasikumar D.R.

Yes you can

是的你可以

<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

https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

回答by Raptor

If you have a form then the following is also possible:

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

<form #f="ngForm">
    <input name="myfield" type="text" minlenght="3" required ngModel>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

Demo here: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

演示在这里：http: //plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

回答by Slack

Using ngClassto disabled the button for invalid form is not good practice in Angular2 when its providing inbuilt features to enable and disable the button if form is valid and invalid respectively without doing any extra efforts/logic.

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.

[disabled]将执行所有操作，例如如果表单有效则将启用它，如果表单无效则它将自动禁用。

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

回答by Shivang Gupta

May be below code can help:

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

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

回答by Sergey P. aka azure

If you are using reactive forms and want to disable some input associated with a form control, you should place this disabledlogic into you code and call yourFormControl.disable()or yourFormControl.enable()

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

回答by pritesh agrawal

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>

回答by Gouk

I think this is the easiest way

我认为这是最简单的方法

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

回答by Amir Twito

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

.ts code

.ts 代码

setStyles() 
{
    let styles = {

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