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'...