How to Check Form is Valid or not in Angular?

By Hardik Savani | April 22, 2020 | Category : 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 and angular 10 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: "[email protected]"}

Let's see bellow layout:

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: