Angular tutorials - How to disable button for invalid form or after click


In this blog post, you’ll learn the Angular Button disable for form invalid

  • Form invalid form validation
  • After click submit

Angular application examples First create a application using angular cli, This post do not covers the creation of application creation from scratch.

In Any applications, You have a user form which contains input fields and submit button. Input fields has validation like required or email or custom validation Submit button is only clickable once form validation are successfully passed.

In the below examples, Submit button is enabled for form validation is passed submit button disable if form contain validation errors.

Button disable form invalid validation Example

In Angular, we do form handling validation using below two approaches

  • template driven forms
  • Reactive form

FormModule is required for angular template driven form validation ReactiveFormsModule is required to import into application for reactive form validation

Import form FormsModule,ReactiveFormsModule in application modules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule,ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Button disable template driven form invalid

Formsmodule already imported as per above step, this enables to use all template driven features in our application Create a component using angular cli command

Define the template form variable for form element In our example, myForm variable is declared and updated the form tag with syntax below

<form #myForm="ngForm">

ngModel declared for two-way binding passing from/to component to model and also gives control like invalid or value changed

Inn button, myForm.invalid returns true if input is empty, disable becomes true

you can also !myForm.valid inplace of myForm.invalid

<form #myForm="ngForm">
  <div class="form-group">
    <label>Name</label>
    <input [(ngModel)]="name" #nameInput="ngModel" name="name" type="text"  required>
    <button [disabled]="myForm.invalid">Submit</button>
  </div>
</form>

Button disable reactive driven form invalid

In typescript component reactiveForm variable is declared of type FormGroup this is initialized with null value and validator configured of required type

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
  reactiveForm: FormGroup;

  constructor(private builder: FormBuilder) {
  }

  ngOnInit() {
  this.reactiveForm = this.builder.group({
    age: [null, Validators.required]
  });
  }
}

In template html component,

form tag is updated with formGroup variable name - reactiveForm

and input is added with formControlName with name of the field.

This will be gives two way binding and form valid and invalid properties

<h3>Submit button disable example Reactive Form</h3>
<form [formGroup]="reactiveForm">
		  <input placeholder="Enter your Age" formControlName="age"/>
  <button type="submit" [disabled]="reactiveForm.invalid">Submit</button>
</form>
<br>
<div>reactiveForm.valid= {{ reactiveForm.valid }}</div>
<div>reactiveForm.invalid = {{ reactiveForm.invalid }}</div>
<div>reactiveForm.status = {{ reactiveForm.status }}</div>
<div>reactiveForm.disabled = {{ reactiveForm.disabled }}</div>

And output is

Button disabled form invalid button

stackblitz example

You can check complete latest working code angular material divider stacblitz

Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’ error

This error is formGroup is not able to find the corresponding module in your component.

The Fix is to please import FormsModule,ReactiveFormsModule in your app.module.ts

Similar Posts