Disabling the Button when input field is empty in Angular Last Updated : 28 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report A Disabled button is un-clickable and unusable. This is useful when suppose user has not entered a password then the submit button should be disabled. In this article, we will see the Disable button when input is empty in Angular. Steps for Installing & Configuring the Angular Application Step 1: Create an Angular application using the following command. ng new appname Step 2: After creating your project folder i.e. appname, move to it using the following command. cd appnameProject Structure It will look like the following: Example 1: In this example, we will use a function that will check the length of the password. If it is equal to zero then make the button disabled otherwise, enable. HTML <!-- app.component.html --> <h2 style="color: green">GeeksforGeeks</h2> <h2> Disable button when input is empty in Angular </h2> <p> Will you vote for me for Geeks Premier League 2023 ? </p> <input required [(ngModel)]="password" (ngModelChange)="checkPasswordEmpty()"> <button [disabled]="invalid">Submit</button> JavaScript // app.component.ts import { DatePipe } from '@angular/common'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: "./app.component.html", }) export class AppComponent { password: string = "" invalid: boolean = true console = console checkPasswordEmpty() { console.log("hi") if (this.password.length == 0) { this.invalid = true } else { this.invalid = false } } } JavaScript // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule } from '@angular/forms' import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HttpClientModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Output Example 2: In this example, we will use form validators using the ngForm Directive. HTML app.component.html <h2 style="color: green">GeeksforGeeks</h2> <h2> Disable button when input is empty in Angular </h2> <p> Will you vote for me for Geeks Premier League 2023 ? </p> <form #formCtrl="ngForm"> <input required [(ngModel)]="password" name="password"> <button [disabled]="!formCtrl.form.valid"> Submit </button> {{console.log(formCtrl.form.valid)}} </form> JavaScript // app.component.ts import { DatePipe } from '@angular/common'; import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: "./app.component.html", }) export class AppComponent { console = console password: string = "" } JavaScript // app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { FormsModule } from '@angular/forms' import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, ], imports: [ BrowserModule, HttpClientModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Output: Comment More infoAdvertise with us Next Article Angular PrimeNG Focus Trap Disabled Button N nikitamehrotra99 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to add input fields dynamically on button click in AngularJS ? The task is to add an input field on the page when the user clicks on the button using AngularJs. Steps: The required component for the operation is created (add-inputComponent). In that component, html file (add-input.component.html) required html is written. In that HTML, the main div for input fi 2 min read How to set the input field value dynamically in AngularJS ? Given an input field and the task is to set the input field value dynamically with the help of AngularJS.Approach: A value is being set to the input field despite the user enter something or not. ng-click event is used to call a function that sets the value to 'This is GeeksForGeeks' with the help o 2 min read How to disable buttons using AngularJS ? In this article, we will see how to disable the button using the particular directive in AngularJS. Sometimes, we need to disable the button, and link on the click event. This task can be accomplished by implementing the ng-disabled directive that is used to enable or disable HTML elements. Syntax: 2 min read Angular PrimeNG Focus Trap Disabled Button Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Focus Trap Disabled Button in Angular PrimeNG. We will also 3 min read How to detect when an @Input() value changes in Angular? @Input() is basically a decorator to bind a property as an input. It is used to pass data i.e property binding from one component to other or we can say, from parent to child component. It is bound with the DOM element. When the DOM element value is changed, Angular automatically updates this proper 3 min read How to add Buttons without Submit the Form in Angular? In Angular, when adding buttons to a form, their default behavior on click is to submit the form itself. However, there are certain situations in which it is necessary to create buttons for forms that provide some sort of functionality or trigger custom logic without triggering the default form subm 5 min read Like