Angular Reactive Form With Validation.

Reactive form is a model-driven approach for data handling. It’s an explicit and immutable process that changes the state of each input change. The angular reactive form is working in two layers. First of all, it creates a model in the working component ts. then the model is elicited in regarding HTML with control name. Let’s create an Angular Reactive Form with validation.

First of all, add the proper dependencies support in app.module.ts like below.

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
imports: [
.................
    ReactiveFormsModule,
    FormsModule,
.................
]

Create a form component using the following command.

ng generate component form

Add the form component to app.module.ts

import { FormComponent } from './form/form.component';
declarations: [
....................
    FormComponent,
....................
  ],

Add the route for this component in app-routing.module.ts.

import { FormComponent } from './form/form.component';
const routes: Routes = [
...........................................
  {path: 'form', component: FormComponent}
...........................................
];

Now open the form.component.ts and add a FormGroup instance named form, create an instance of FormBuilder class named fb in the constructor parameter. Initialize the form in ngOnInit() with the properties of fb like below.

import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class Form implements OnInit {
    form: FormGroup;
    constructor(
        private fb: FormBuilder
    ){}
    ngOnInit() {
        this.quotationForm = this.fb.group({
            
        });
    }
}

Now we will add the field controls of the form and add the validation process there. We will add a field named name which will can’t be empty, a email field which will have a custom email validation pattern, a number input which has a limit validation with max and min control. Now follow the coding snippet to get proper guidance.


.....................................
ngOnInit() {
        this.quotationForm = this.fb.group({
            name: ['', Validators.required],
        });
    }

For email validation, add the following code before ngOnInit()

emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

Now add the validation in email control field. we can add multiple validations in one control like below.

this.quotationForm = this.fb.group({
....................................................
    email: ['', [Validators.required, Validators.pattern(emailPattern)]],
....................................................
});

For number-range validation, we can use the following procedure.

this.quotationForm = this.fb.group({
....................................................
    number: ['', [Validators.required, Validators.min(0), Validators.max(100)]],
....................................................
});

Now the number control won’t allow the input more than 100 and less than 0.

79 Views

About Author

Nasir

Welcome to CodeKit.xyz. I am working in an automation company as a software engineer. From the deep thirst of learning, I have developed this platform.

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>