Angular Form Validation Example Tutorial

Today, We want to share with you angular form valid.In this post we will show you angular form invalid but no errors, hear for angular reactive form validation we will give you demo and example for implement.In this post, we will learn about Angular 6 Form Validation with Message – Angular 6 Live Validation with an example.

How to Check Form is Valid or not in Angular?

here you can learn all about how to check form is valid or invalid in angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 online single web application.

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

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:

src/app/app.component.html

<div class="container">
    <h1>How to check form is valid or not in Angular - www.pakainfo.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);
    }
  }
}

ng serve

Results

true

{name: "virat", email: "[email protected]"}

I hope you get an idea about angular form validators.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.