In this Angular tutorial, we will learn how to add Reactive Form validation in the angular app.
In addition, we will get to know how to add form controls in the application and validate them on submit.
How to add validation in Reactive Form in the Angular app
We simply need to follow the given steps for implementing the lazy loading image in Angular 12 app
Step 1 is to Create the New Angular App
Step 2 is to Import the Form Module
Step 3 is to Add Code on View File
Step 4 is to Use Component ts File
Step 5 is to Start the Angular App
Now, let’s learn in detail
Step 1- Create the New Angular App
First of all, open your terminal and execute the given command on it to install an angular app:
ng new validate-reactiveform-app
Step 2 – Import the Module
Next is to open app.module.ts file and import HttpClientModule, Formsmodule and ReactiveFormsModule. It si given below.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 3: Add Code on View File
In next step, create simple Reactive Form with Input File element. For this, visit src/app/app.component.html and update the following code into it.
<h1>Angular 12 Reactive Forms Validation Example - Thecodemon.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 *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
<div *ngIf="f.name.errors.required">Name is required.</div>
<div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
class="form-control">
<div *ngIf="f.email.touched && f.email.invalid" class="alert alert-danger">
<div *ngIf="f.email.errors.required">Email is required.</div>
<div *ngIf="f.email.errors.email">Please, enter valid email address.</div>
</div>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea
formControlName="body"
id="body"
type="text"
class="form-control">
</textarea>
<div *ngIf="f.body.touched && f.body.invalid" class="alert alert-danger">
<div *ngIf="f.body.errors.required">Body is required.</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
Step 4: Use Component ts File
Now, follow this step in which we visit src/app directory and open app.component.ts. After this, add the following code like formGroup and formControl element on component.ts file:
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(3)]),
email: new FormControl('', [Validators.required, Validators.email]),
body: new FormControl('', Validators.required)
});
get f(){
return this.form.controls;
}
submit(){
console.log(this.form.value);
}
}
Step 5: Start the Angular App
Lastly, we reach the final step of implementation where we execute the following command on the terminal to start angular app:
ng serve
Conclusion
Now, we reach the end of this tutorial where we have learnt how to add validation in the Reactive Form.
Thanks