Angular 2-自定义表单验证器不工作

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

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    // 在这里编写自定义验证逻辑
    // 如果验证通过，返回null；否则返回一个包含错误消息的对象
    return control.value === 'example' ? null : { customError: 'Invalid value' };
  };
}

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { customValidator } from './custom-validator';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input type="text" formControlName="myControl">
      <div *ngIf="myControl.invalid && myControl.dirty">
        <div *ngIf="myControl.errors.customError">Invalid value</div>
      </div>
    </form>
  `,
})
export class FormComponent {
  myForm: FormGroup;
  myControl: FormControl;

  constructor() {
    this.myControl = new FormControl('', [Validators.required, customValidator()]);
    this.myForm = new FormGroup({
      myControl: this.myControl,
    });
  }
}