Building a custom validator
Sometimes, default validators won't cover all the scenarios that we might encounter in our application. Luckily, it is quite easy to write a custom validator and use it in our Angular reactive forms. In our case, we are building a validator to check whether the name of a hero already exists.
We have already learned that a validator is a function that needs to return a ValidationErrors object with the error specified or a null value. Let's define such a function:
reserved-name.directive.ts
import { ValidatorFn, AbstractControl } from '@angular/forms';
const heroes = [
{ id: 1, name: 'Boothstomper' },
{ id: 2, name: 'Drogfisher' },
{ id: 3, name: 'Bloodyllips' },
{ id: 4, name: 'Mr Bu Moverse'...