Angular Check Form is Valid or Not Example

In this tute, we will discuss angular reactive form check if valid. it's simple example of how to check form is valid in angular. let’s discuss about how to check if form is valid in angular. you will learn angular 9 check form is valid or not. So, let's follow few step to create example of angular form check if valid.

Here, i will show how to check form is valid or invalid in angular 6, angular 7, angular 8 and angular 9 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 - HDTuto.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...