【Angular】ディレクティブでバリデータを設定する方法！

import { Directive } from '@angular/core';
import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';

@Directive({
  selector: '[appForbiddenWord]',
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: ForbiddenWordDirective,
      multi: true,
    }
  ]
})
export class ForbiddenWordDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const forbidden = /test/i.test(control.value);
    return forbidden ? { forbiddenWord: { value: control.value } } : null;
  }
}

<form [formGroup]="form">
  <label>
    入力欄：
    <input formControlName="name" appForbiddenWord />
  </label>
  <div *ngIf="form.controls['name'].errors?.forbiddenWord">
    「test」という単語は使用できません。
  </div>
</form>

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['']
    });
  }
}