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

在Angular 5中编写使用外部数据的自定义验证器，可以按照以下步骤进行：

创建一个自定义验证器类，可以命名为ExternalDataValidator。这个类需要实现Validator接口，并重写validate方法。在validate方法中，我们可以通过传入的控件值和外部数据进行验证逻辑的实现。
在ExternalDataValidator类中，我们需要引入HttpClient模块来获取外部数据。可以通过注入HttpClient来实现。在构造函数中，使用依赖注入的方式将HttpClient注入到类中。
在ExternalDataValidator类中，可以定义一个方法来获取外部数据。可以使用HttpClient的get方法来发送HTTP请求，并获取外部数据。获取到数据后，可以进行相应的处理，例如解析JSON数据。
在validate方法中，可以调用获取外部数据的方法，并根据获取到的数据进行验证逻辑的实现。可以根据控件值和外部数据进行比较，判断是否满足验证条件。
在Angular组件中，可以使用Validators.compose方法来组合多个验证器，包括内置的验证器和自定义的验证器。可以将ExternalDataValidator作为一个验证器函数传入Validators.compose方法中。

以下是一个示例代码：

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()
      ]))
    });
  }
}

在上述示例中，ExternalDataValidator类中的getExternalData方法使用HttpClient发送HTTP请求来获取外部数据。validate方法返回一个ValidatorFn，它是一个验证器函数，可以在FormControl中使用。

请注意，示例中的外部数据获取URL为示意，实际应根据实际情况进行修改。

对于Angular 5的更多信息和相关概念，可以参考腾讯云的Angular 5开发文档：Angular 5开发文档