Angular 4/5 Form validation using Validators Class

In this article I discuss on how to use Validators class for validation form field.
First we need to import “Validators” Class so we need to write syntax below in component.

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

You can use the Validators in FormControl or collection of controllers that returns error or null. If null that means it satisfy the condition.

  1. Min Validator
    static min(min: number): ValidatorFn

    using this Validator we can set controls have a value greater than a number.

    var minamount = new FormControl("", Validators.min('20'))
  2. Max Validator
    static max(max: number): ValidatorFn

    using this Validator we can set controls have a value less than a number.

    var maxamount = new FormControl("", Validators.min('20000'))
  3. Required Validator
    static required(control: AbstractControl): ValidationErrors|null

    using this Validator controls to have a non empty value.

    var name= new FormControl("", Validators.required)
  4. Email Validator
    static email(control: AbstractControl): ValidationErrors|null

    using this Validator controls for validating email address.

    var name= new FormControl("", Validators.email)
  5. minLength Validator
    static minLength(minLength: number): ValidatorFn

    using this Validator controls for validating minimum length of the value.

    var name= new FormControl("", Validators.minLength(4))
  6. maxLength Validator
    static maxLength(maxLength: number): ValidatorFn

    using this Validator controls for validating maximum length of the value.

    var name= new FormControl("", Validators.maxLength(20))
  7. pattern Validator
    static pattern(pattern: string|RegExp): ValidatorFn

    using this Validator controls for validating pattern satisfy the value.

    var name= new FormControl("", Validators.pattern('/name/'))



You can use multiple validtor for the control for that we need to pass into the array like below.

var name = new FormControl("", [Validators.minLength(4),Validators.maxLength(20)])

You can use FormGroup in multiple FormControl its looks like in below code.

const form = new FormGroup({
  first: new FormControl('', Validators.minLength(2)),
  last: new FormControl(''),
  email: new FormControl('', Validators.email),
});

You can also include group-level validators as the second arg in the FormGroup.
Example if we need to validate password & confirm password then you can write code display like below.


const register = new FormGroup({
  pwd: new FormControl('', Validators.minLength(8)),
  pwdConfirm: new FormControl('', Validators.minLength(8)),
}, pwdMatchValidator);


function pwdMatchValidator(frm: FormGroup) {
   return frm.get('password').value === frm.get('passwordConfirm').value
      ? null : {'mismatch': true};
}

Using Validators Class we can easily validate our form fields.

Spread the love
  • 10
  •  
  •  
  •  
  • 2
  •  
  • 1
  •  
  •