In this post we’ll see some examples of disabling a button in Angular. There is a disabled property of button that can be set to true or false in order to disable or enable a button.
So disabling a button is as simple as using the statement given below-
<button class="btn btn-primary" [disabled]="true">Submit</button>
Of course you’ll bind it with some property or use a condition to disable or enable a button dynamically so let’s see examples of doing that.
Disable a button if no input text Angular example
To ensure that button is disable when there is no text and it is enable only when some text is entered you can use two way Angular two way databinding.
Template
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="name" class="col-form-label">Name:</label>
<input class="form-control" placeholder="Enter name" id="name" [(ngModel)]="userName">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="btn btn-primary" [disabled]="userName === ''">Submit</button>
</div>
</div>
</div>
As you can see userName is bound to the property in the Typescript file using two way binding. Then using Angular property binding button’s disabled property is bound to a condition that checks if userName is empty.
[disabled]="userName === ''"
Component (Typescript file)
In the AppComponent file property userName is added with the initial value as empty.
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userName = '';
}
When button is disabled
When button is enabled
Disable a button after click Angular example
This Angular example shows how to disable a button after it is clicked. To do that disabled property of the button is bound to a boolean flag and that flag’s value is set by calling a function on the button click event.
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="name" class="col-form-label">Name:</label>
<input class="form-control" placeholder="Enter name" id="name">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="btn btn-primary" (click)="onButtonClick()" [disabled]="click">Submit</button>
</div>
</div>
</div>
Component
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//userName='';
click : boolean = false;
onButtonClick(){
this.click = !this.click;
}
}
Same thing can be done entirely in Typescript by using the click event of the button element in the template and passing the entire event payload ($event) to the component event handler.
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="name" class="col-form-label">Name:</label>
<input class="form-control" placeholder="Enter name" id="name">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="btn btn-primary" (click)="onButtonClick($event)">Submit</button>
</div>
</div>
</div>
Notice that disabled property is not used with the button element.
Component
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//userName='';
click : boolean = false;
onButtonClick(event : MouseEvent){
(event.target as HTMLButtonElement).disabled = true;
}
}
Disable a button if no input and after click
Here is an example which combines the above two examples and disables a button if there is no input as well as disables a button after the button is clicked once.
Following code listens to the keyup event of the input element and passes the entire event payload ($event) to the component event handler. It also listens to the click event of the button and calls the onButtonClick() function when the button is clicked.
<div class="container">
<div class="row">
<div class="col-md-12">
<label for="name" class="col-form-label">Name:</label>
<input class="form-control" placeholder="Enter name" id="name" (keyup)="onKey($event)">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<button class="btn btn-primary" (click)="onButtonClick()" [disabled]="click">Submit</button>
</div>
</div>
</div>
When a user presses and releases a key, the keyup event occurs, and Angular provides a corresponding DOM event object in the $event variable which this code passes as a parameter to the component's onKey() method. In the onKey() method it is checked whether the input text box element has any value or not and true or false is passed accordingly.
In onButtonClick() method value of the click property which is boolean is reversed.
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
click : boolean = true;
onButtonClick(){
this.click = !this.click;
}
onKey(event: KeyboardEvent) {
// if value is not empty the set click to false otherwise true
this.click = (event.target as HTMLInputElement).value === '' ? true:false;
}
}
Disable a button if form is not valid
You can also disable a button if Angular form is invalid. Suppose you have created a form which is bound to the name "membershipForm" then you can check for the invalid state as given below.
<button type="submit" [disabled]="membershipForm.invalid" class="btn btn-success">Submit</button>
- Check the whole example for form validation in this post- Angular Reactive Form Validation Example
That's all for this topic Angular Disable Button Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!
>>>Return to Angular Tutorial Page
Related Topics
You may also like-