Angular2 disable button
HtmlAngularAngular2 TemplateAngular2 FormsHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
#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>
Solution 2 - Html
I would recommend the following.
<button [disabled]="isInvalid()">Submit</button>
Solution 3 - Html
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
Solution 4 - Html
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
Solution 5 - Html
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="">
Solution 6 - Html
May be below code can help:
<button [attr.disabled]="!isValid ? true : null">Submit</button>
Solution 7 - Html
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>
Solution 8 - Html
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()
Solution 9 - Html
I think this is the easiest way
<!-- Submit Button-->
<button
mat-raised-button
color="primary"
[disabled]="!f.valid"
>
Submit
</button>
Solution 10 - Html
<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;
}