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.

Read Also:  how to search and display data from database in php?

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to add class using Angularjs?
  2. Read Also:  Angular 6 Form Validation Tutorial Example From Scratch
  3. Read Also:  Angular 6 Forms Validation Tutorial Example From Scratch
  4. Read Also:  Form Validations using Angular Example
  5. Read Also:  Nodejs Login and Registration with PHP MySQL and SQLite Example
  6. Read Also:  cURL POST header parameters file json request
  7. Read Also:  Angular 6 Reactive Forms Validation Tutorial Example
  8. Read Also:  Check if value exists jQuery in Array – jQuery.inArray()
  9. Read Also:  Back to Top Button using jQuery and CSS - Scroll to Top Example
  10. Read Also:  JavaScript inArray Check if value exists
CLOSEX