How to Check Form is Valid or not in Angular?
In this post we will give you information about How to Check Form is Valid or not in Angular?. Hear we will give you detail about How to Check Form is Valid or not in Angular?And how to use it also give you demo for it if it is necessary.
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 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 >
<h1>How to check form is valid or not in Angular - ItSolutionStuff.com</h1>
<form [formGroup]="form" (ngSubmit)="submit()">
<div >
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
>
</div>
<div >
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
>
</div>
<strong>Result:</strong>
<pre>{{ form.valid }}</pre>
<button 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…
Hope this code and post will helped you for implement How to Check Form is Valid or not in Angular?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs