Reactive Form Validation In Angular

Reactive Form Validation By Sagar Jaybhay

When we create reactive forms we don’t use html5 validation attributes rather than we use form validator which we assign when we create form group controls.

import { Component } from '@angular/core';
import { FormGroup,FormControl, Validators} from '@angular/forms';
@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {

  form=new FormGroup({
    username:new FormControl('initialValue',Validators.required),
    password:new FormControl('initialvalue',Validators.required)
  })
}

In this we use Validator class in which static methods are defined like required,email,min, max length etc. first parameter to FormControl is initial value or default value which we want to set.

For this validator class we need to import this validator from angular/forms.

All About Reactive Forms – Link

import { FormGroup,FormControl, Validators} from '@angular/forms';

How to add multiple validators in ReactiveForms angular?

FormControl class in which second parameter takes validator or validatorfn as input parameter.

form=new FormGroup({
    username:new FormControl('',[Validators.required,
      Validators.minLength(3)]),
    password:new FormControl('',Validators.required)
  })

How to Implement Custom Validation in ReactiveForms Angular?

ValidatorFn

interface ValidatorFn { (control: AbstractControl): ValidationErrors | null }

Any validator function which matches signature of above interface is considered as validator function.

Then write below code in validator files.

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class UsernameValidators{
    
   static checkWhiteSpace(control:AbstractControl):   ValidationErrors    |   null{
        if((control.value as string).indexOf(' ')>=0)
        return {cannotcontainwhitespcae:true};

        return null;
    }
}

This code checks if any white space contains in user name or not. After this you need to add this validator in our validator group.

form=new FormGroup({
    username:new FormControl('',[Validators.required,
      Validators.minLength(3),
    UsernameValidators.checkWhiteSpace
    ]),
    password:new FormControl('',Validators.required)
  })

Actually we are creating static method so we can directly call this method using class name.

How to set form level errors in reactive form angular?

To check validation on button click in reactive forms we have ngSubmit event and on that event we call login method.

<form [formGroup]="form" (ngSubmit)="login()">

Now in login method we check the validation and as per response we set the errors or not set the errors. To set the form level errors we use setErrors method of form object.

  this.form.setErrors({
    invalidLogin:true
  });
}

Now to check the errors on UI side we need to add div which error for that we add div and in that we check errors are present or not. And on that basis we show the errors.

<div *ngIf="form.errors" class="alert alert-danger">