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...
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example