Angular

Last Updated: 8/31/2023

Implementing Custom Validation

  • You can use interfaces to define the shape of object or function
  • Signature of function includes parameter types, order of parameters and return type
  • Custom validator function should implement/match the interface ValidatorFn
  • Better to put all the validator function in a class this way we encapsulate them in a single place
//refer angular.io
interface ValidatorFn {
  (control: AbstractControl): ValidationErrors | null
}
parameter - AbstractControl
return - null or ValidationErrors

type ValidationErrors {
	[key: string]: any
}
key - name of the validation error
value - can be true or complex object with details about error
  • Create new class in common/valiators -

username.validators.ts

export class UsernameValidators {
  static cannotContainSpace(control: AbstractControl) : ValidationErrors | null  {
    if((control.value as string)).indexOf(" ") != -1)
       return {"cannotContainSpace": true}

    return null;
  }
}

component.ts

username:  new FormControl('', [Validators.required, Validators.minLength(3), UsernameValidators.cannotContainWhiteSpace]),

component.html

<div *ngIf="username.errors.cannotContainSpace">Username cannot contain space</div>

Custom Validator with paramaters

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
}
Previous
Next