как использовать собственный валидатор в Angular 9

Question

Я пытаюсь реализовать собственный валидатор в Angular 9.

Вот мой валидатор (не полный, просто пытаюсь заставить его выйти из строя в тот момент, если введено 'aaaa').

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

export class ManufactureCodeValidator {
  static mustBeHex(control: AbstractControl): ValidationErrors | null {
    if (control.value == 'aaaa') {

      return {mustBeHex: true}
    }
    return null;
  }
}

тогда в моем файле компонента, связанном с моим html компонентом, у меня есть:

import { NgForm, Validators } from "@angular/forms";
import { ManufactureCodeValidator } from '../../../validators/manufacturecode';

@Component({
  selector: 'maintain-manufacturers',
  providers: [Title],
  templateUrl: './maintain-manufacturers.component.html',
  styleUrls: ['../../shared/form/form-styles.css']
})

export class MaintainManufacturersComponent implements OnInit {
  @ViewChild(ActionSubmissionModal) submittingModal: ActionSubmissionModal;
  @ViewChild('manufacturerForm') form: NgForm;

........
 ngOnInit(): void {
      this.title = 'Maintain Manufacturers';
      this.titleService.setTitle(this.title);

      this.form = new NgForm(null, [ManufactureCodeValidator]);
    }
......

Затем в моем html шаблоне у меня есть:

<form (ngSubmit)="submit()" #manufacturerForm="ngForm">
  <fieldset class="form-area">
    <legend>Maintain Manufacturer</legend>
    <div class="form-group form-inline row">
      <div class="col-md-2">
        <label class="pull-right" for="code">Manufacturer Code</label>
      </div>
      <div class="col-md-2">
        <input class="form-component-with-input" [(ngModel)]="request.code" [value]="request.code" maxlength="4" name="code" id="code" ManufactureCodeValidator.mustBeHex (onblur)="codeChanged($event)" required  />
      </div>
      <div class="col-md-2">
        <validation-message [control]="code" [message]="'Manufacturer Code must be a hexadecimal value of excactly 4 characters'"></validation-message>
      </div>
......

Итак, я хочу увидеть, что если я введу «аааа» в свое поле ввода, когда он потеряет фокус, должно появиться мое сообщение проверки. Что я делаю не так?