How to Check Form is Valid or not in Angular?

In this tutorial we will go over the demonstration of angular form check if valid. you will learn how to check form is valid or not in angular. you'll learn angular reactive form check if valid. if you have question about how to check form is valid in angular then i will give simple example with solution. Alright, let’s dive into the steps.

Here, i will show how to check form is valid or invalid in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 application.

we will see simple example with angular reactive form check if valid so basically you understand how it works. you can easily check like as bellow:

<button type="submit" [disabled]="!form.valid">Submit</button>
  
<button type="submit" [disabled]="form.invalid">Submit</button>

Now we will see full example then you can understand how it works. let's see bellow:

Import FormsModule:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Template Code:

In this step, we will write code of html form with ngModel. so add following code to app.component.html file.

I used bootstrap class on this form. if you want to add than then follow this link too: Install Boorstrap 4 to Angular 9.

src/app/app.component.html

<div class="container">
    <h1>How to check form is valid or not in Angular - ItSolutionStuff.com</h1>
       
    <form [formGroup]="form" (ngSubmit)="submit()">
           
        <div class="form-group">
            <label for="name">Name</label>
            <input 
                formControlName="name"
                id="name" 
                type="text" 
                class="form-control">
        </div>
        
        <div class="form-group">
            <label for="email">Email</label>
            <input 
                formControlName="email"
                id="email" 
                type="text" 
                class="form-control">
        </div>
  
        <strong>Result:</strong>
        <pre>{{ form.valid }}</pre>
        
        <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

updated Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
   form = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3)]),
    email: new FormControl('', [Validators.required, Validators.email])
  });
    
  submit(){
    console.log(this.form.valid);
  
    if(this.form.valid){
      console.log(this.form.value);
    }
  }
}

Now you can run your application using following command:

ng serve

Output

true
{name: "hardik", email: "hardik@gmail.com"}

Let's see bellow layout:

I hope it can help you...