mediumFrontend

How do you create a custom validator in reactive forms?

Q: How do you create a custom validator in reactive forms?

**Core concept.** A validator is a function ( ValidatorFn ) that takes a control and returns null when valid, or an **error object** ( { errorKey: true } ) when invalid. Attach it to a FormControl alongside the built-ins. For server checks use an AsyncValidatorFn (returns an Observable/Promise); for rules spanning fields, put a validator on the FormGroup . ValidatorFn(control) inspect control.value <line class='d-edge' x

944 views

Understand the problem

Explain custom validators.

formsvalidators

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A factory + cross-field validator

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

// parameterized (factory) validator
export function forbidden(word: string): ValidatorFn {
  return (c: AbstractControl): ValidationErrors | null =>
    c.value === word ? { forbidden: { word } } : null;
}

// cross-field validator on the group
export const matchPasswords: ValidatorFn = (g: AbstractControl) =>
  g.get('pw')?.value === g.get('confirm')?.value ? null : { mismatch: true };

const form = new FormGroup({
  name: new FormControl('', [forbidden('admin')]),
  pw: new FormControl(''),
  confirm: new FormControl(''),
}, { validators: matchPasswords });

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Explain what output() and outputFromObservable() are in modern Angular and how they differ from @Output().

How does catchError work in RxJS, and how do you return a fallback value?