如何编写使用外部数据的自定义验证器Angular 5

import { HttpClient } from '@angular/common/http';
import { AbstractControl, ValidatorFn, Validators } from '@angular/forms';

export class ExternalDataValidator {
  constructor(private http: HttpClient) {}

  private getExternalData(): Promise<any> {
    return this.http.get('https://example.com/external-data').toPromise();
  }

  validate(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      const externalData = this.getExternalData();
      // 根据控件值和外部数据进行验证逻辑的实现
      if (control.value === externalData) {
        return null; // 验证通过
      } else {
        return { externalDataInvalid: true }; // 验证失败
      }
    };
  }
}

// 在组件中使用自定义验证器
@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myControl">
    </form>
  `,
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    const externalDataValidator = new ExternalDataValidator(this.http);
    this.myForm = new FormGroup({
      myControl: new FormControl('', Validators.compose([
        Validators.required,
        externalDataValidator.validate()
      ]))
    });
  }
}