Reactive Form Validation Example in Angular 12

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