[Angular] Create a custom validator for reactive forms in Angular

Also check: directive for form validation

User input validation is a core part of creating proper HTML forms. Form validators not only help you to get better quality data but they also guide the user through your form. Angular comes with a series of built-in validators such as required or maxLength etc. But very soon you have to build your own custom validators to handle more complex scenarios. In this lesson you‘re going to learn how to create such custom validators for Angular‘s reactive forms.

Basic validator is just a function.

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

export function nameValidator(name: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const isValid = control.value === ‘‘ || control.value === name;

    if (isValid) {
      return null;
    } else {
      return {
        nameMatch: {
          allowedName: name
        }
      };
    }
  };
}

Then you can use it with the validation in Reactvie form:

   import { nameValidator } from ‘./name.validator‘;

    this.form = this.fb.group({
      firstname: [‘‘, [Validators.required, nameValidator(‘someone‘)]]
    });