Create a custom synchronous validator for an Angular Reactive Form

WHAT THIS TESTS: This question probes whether you understand the ValidatorFn contract and the reactive forms paradigm where validation logic lives in the component class, not the template. Interviewers want to see that you know the exact return signature and how to wire a custom function into a FormControl instance.

A GOOD ANSWER COVERS: A strong response walks through four steps in order. First, define a plain function that takes an AbstractControl as its sole parameter and inspects control.value. Second, return null when the value is valid, which tells Angular to set the control status to VALID. Third, return a ValidationErrors object when the value is invalid, such as { forbiddenName: { value: control.value } }, which tells Angular to set the status to INVALID and populates the errors map. Fourth, apply the validator by passing it as the second argument to the FormControl constructor, like new FormControl('', myValidator), or by calling control.setValidators(myValidator) followed by control.updateValueAndValidity(). Mention that you read errors in the template with control.hasError('forbiddenName') or control.errors.

COMMON WRONG ANSWERS: Red flags include returning true or false from the validator instead of null or an error object. Another mistake is describing HTML validation attributes like required or minlength on the template, which is the template-driven forms pattern, not reactive forms. Candidates also stumble by forgetting to invoke updateValueAndValidity after adding a validator dynamically, or by not typing the parameter as AbstractControl.

LIKELY FOLLOW-UPS: Expect the interviewer to ask how to compose multiple validators, which you do by passing an array to the second argument. They may ask about the difference between sync and async validators, where async validators return a Promise or Observable and are passed as the third argument. Cross-field validation is another common follow-up, requiring a validator at the FormGroup level that compares sibling controls.

ONE CONCRETE EXAMPLE: Suppose you want to block the name Bob. You write a function named forbiddenNameValidator that takes control: AbstractControl. Inside, if control.value is 'bob', you return { forbiddenName: true }. Otherwise you return null. In the component class, you create the control with name = new FormControl('', forbiddenNameValidator). In the template, you show an error with @if (name.hasError('forbiddenName')) { Name cannot be Bob. }.

Source: angular.dev