javascript / intermediate
Snippet
Emitting Structured ValidationErrors in Custom Form Validators
Custom Angular validators must adhere to the ValidatorFn signature by returning either null for a valid state or a structured ValidationErrors object when invalid. Providing metadata such as expected vs actual values within the error payload enables components to render contextual and informative validation messages.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';export function passwordComplexityValidator(minSpecialChars: number): ValidatorFn {return (control: AbstractControl<string>): ValidationErrors | null => {const value = control.value || '';const specialCount = (value.match(/[^A-Za-z0-9]/g) || []).length;if (specialCount < minSpecialChars) {return {insufficientSpecialChars: {required: minSpecialChars,actual: specialCount}};}return null;};}
angular
Breakdown
1
export function passwordComplexityValidator(minSpecialChars: number): ValidatorFn {
Factory function that accepts configuration parameters and returns the validator closure.
2
return { insufficientSpecialChars: { required: minSpecialChars, actual: specialCount } };
Returns a descriptive error object containing failure context for the form control.