Hello Devs,

In this tutorial, we are going to learn about reactive form validation in angular 10.

Reactive forms provide a model-driven approach to handling form inputs whose values change over the time. In Reactive forms, we need to import "ReactiveFormsModule" from angular forms library.

Follow this step by step guide given below:




Install Angular App

ng new my-new-app



Import FormsModule

src/app/app.module.ts

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 { }



Form with ngModel

src/app/app.component.html

<h1>Angular 10 Reactive Forms Validation Example - Rathorji.in</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>



updated Ts File

src/app/app.component.ts

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);

  }

  

}


Run this command:

ng serve

Output:

{name: "Hardik Savani", email: "rathorji@gmail.com", body: "This is a test"}


I hope this example helps you.