Angular2 shutdown button

Question

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

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

but can I do this with [ngClass] or [ngStyle] ? For example:

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

Thank.

Answer 1

Update

I am curious. Why don't you want to use the [disabled] attribute binding provided by Angular 2? This is the right way to handle this situation. I suggest you migrate the isValid check using the component method.

 isValidForm() { return this.isValid; } <button [disabled]="!isValidForm()" (click)="onConfirm()">Confirm</button> 

The problem with what you tried to explain below

Basically you can use ngClass here. But adding a class would not limit the event when shooting. To enable an event on a valid input, you should change the click event code below. So onConfirm will be launched only when the field is valid.

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

Demo here

Answer 2

I would recommend the following.

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

Answer 3

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

Answer 4

If you have a form, 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

Answer 5

I tried using disconnected along with the click event. Below is a snippet, the accepted answer also works fine, I am adding this answer to give an example of how it can be used with disabled and clicks.

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

Answer 6

If you use reactive forms and want to disable some input associated with the form control, you must put this disabled logic in the code and call yourFormControl.disable() or yourFormControl.enable()