Angular2 disable button

Question

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.

here is working plnkr for the same http://plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview — Pardeep Jain, Feb 21 '16 at 11:24

Pankaj Parkar · Accepted Answer · 2018-08-08T05:36:23.043

187

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

edited Aug 08 '18 at 05:36

answered Feb 21 '16 at 11:41

Pankaj Parkar

134,766
23
234
299

Well I add that ngClass allready in the button so its looks to me that disabled need to be ther to, why the [disabled] way is preferd? – Nir Schwartz Feb 21 '16 at 11:57
@NirSchwartz because it will do both things at a time.. selector css rules will get applied on `button[disabled]` selector based & disabled event will restrict `click` event to fire up on button.. in `ngClass` class thing you need to handle it by own, as I shown in above answer.. – Pankaj Parkar Feb 21 '16 at 12:01
The reason why people want to use [attr.disabled] rather than [disabled] is because angular FormControl's [disabled] cannot be set dynamically. Here is the issue https://github.com/angular/angular/issues/11271 – davyzhang Mar 26 '18 at 03:26
1

You should not be calling a method in a template binding. `[disabled]="!isValid"` – Tom Aug 07 '18 at 10:34
3

Ahhaa.. if method has just a variable reference, theb its fine.. If you have complex logic inside a function, then it isn't preferred. You're correct, in this case I can directly call `isValid` flag on UI – Pankaj Parkar Aug 07 '18 at 15:29

Proximo · Answer 2 · 2017-03-08T15:24:29.707

41

I would recommend the following.

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

edited Mar 08 '17 at 15:24

answered May 12 '16 at 03:39

Proximo

6,235
11
49
67

4

Isn't it better to avoid function calls in html, as it will be called each tick/cycle? – John Mar 27 '19 at 07:33

score 9 · Answer 3 · answered Feb 21 '16 at 11:16

9

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

answered Feb 21 '16 at 11:16

Sasikumar D.R.

862
1
6
17

score 7 · Answer 4 · answered Jun 09 '17 at 09:39

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

score 5 · Answer 5 · answered Jan 06 '18 at 11:28

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

score 4 · Answer 6 · answered Jan 31 '18 at 10:31

4

May be below code can help:

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

answered Jan 31 '18 at 10:31

Shivang Gupta

3,139
1
25
24

This is not a good solution since ` – BillyTom Dec 07 '18 at 12:11

score 2 · Answer 7 · answered Apr 12 '17 at 01:26

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>

score 2 · Answer 8 · answered Nov 01 '17 at 09:29

2

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()

answered Nov 01 '17 at 09:29

Sergey P. aka azure

3,993
1
29
23

score 2 · Answer 9 · answered Jun 10 '18 at 15:39

2

I think this is the easiest way

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

answered Jun 10 '18 at 15:39

Gouk

137
1
4

score 1 · Answer 10 · answered May 16 '18 at 09:10

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

Angular2 disable button

10 Answers10

Update

The Problem with what you tried explained below

Linked

Related