Simplify Angular - Custom Validators

Here is a quick guide for custom form validation. Angular’s data binding provides plenty of ways to validate the form data you are about to pass back to your server, but Angular’s reactive forms provide a nice way to add your validation.

Build Your Form

Create your input in your components template

<!-- component HTML -->
<form [formGroup]="myForm">
	...
	<input formControlName="myInput" />
	...
</form>

//Component Typescript
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
...
myForm: FormGroup;
...
constructor(private readonly formBuilder: FormBuilder) { }
...
this.myForm = this.formBuilder.group({
    myInput: new FormControl('', [])
})

Create Your Validators

Angular validators take an AbstractControl as a parameter and return the error name key and a boolean value of true if it is invalid, or null if the input is valid.

//Component Typescript
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
...
this.myForm = this.fromBuilder.group({
    myInput: new FormControl('', [this.requiredTrimmed])
})
...
requiredTrimmed(control: AbstractControl): {[key: string]: any | null} {
  const key = 'required-trimmed';
  const error = { [key]: true };
  const value = control.value;

  if (value === undefined) { return error; }
  if (value === null) { return error; }
  if (value.trim().length <= 0) { return error; }

  return null;
}

Easy enough when your validators are simple like this one, but what happens when you need to pass in some parameters.

//Component Typescript
import { ValidatorFn, AbstractControl } from '@angular/forms';
...
minLengthTrimmed(min: number): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    const key = 'min-length-trimmed';
    const error = { [key]: true };
    const value = control.value;

    if (value === undefined) return error;
    if (value === null) return error;
    if (value.trim().length < min) return error;

    return null;
  }
}

Clean It Up

Typically You are going to use these validators in more than one component throughout your app, so lets create ourselves a custom validator helper class.

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

export class AppValidators {
  static minLengthTrimmed(min: number): ValidatorFn => {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      const key = 'min-length-trimmed';
      const error = { [key]: true };
      const value = control.value;

      if (value === undefined) return error;
      if (value === null) return error;
      if (value.trim().length < min) return error;

      return null;
    }
  }
}

Now our form building looks like this:

//Component Typescript
...
this.myForm = this.fromBuilder.group({
    myInput: new FormControl('', [AppValidators.minLengthTrimmed(3)])
})
...

Hope this helps! Stay tuned for a post on AsyncValidators. I’ve started an open source library of custom validators, so if you have any suggestions for new validators please let me know here or on Github!

NPM: https://www.npmjs.com/package/more-validators
Github: https://github.com/ChekTek/more-validators

Last updated on