Source:  Twitter logo

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

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

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

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

Thanks.

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 isValid check via component method.

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

The Problem with what you tried explained below

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

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

Demo Here

185 users liked answer #0dislike answer #0185
Pankaj Parkar profile pic
Pankaj Parkar

I would recommend the following.

<button [disabled]="isInvalid()">Submit</button>
40 users liked answer #1dislike answer #140
Proximo profile pic
Proximo

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

9 users liked answer #2dislike answer #29
Sasikumar D.R. profile pic
Sasikumar D.R.

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

7 users liked answer #3dislike answer #37
Raptor profile pic
Raptor

Using ngClass to 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.

[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.

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="">
5 users liked answer #4dislike answer #45
Slack profile pic
Slack

May be below code can help:

<button [attr.disabled]="!isValid ? true : null">Submit</button>
4 users liked answer #5dislike answer #54
Shivang Gupta profile pic
Shivang Gupta

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>
2 users liked answer #6dislike answer #62
pritesh agrawal profile pic
pritesh agrawal

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

2 users liked answer #7dislike answer #72
Sergey P. aka azure profile pic
Sergey P. aka azure

I think this is the easiest way

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
2 users liked answer #8dislike answer #82
Gouk profile pic
Gouk
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.ts code

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
1 users liked answer #9dislike answer #91
Amir Touitou profile pic
Amir Touitou

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).