使用注入提供程序的Angular异步表单验证

import { Injectable } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class CustomAsyncValidator {
  constructor() {}

  validate(control: FormControl): Observable<any> {
    // 执行异步操作，例如发送HTTP请求进行验证
    return this.http.get('https://api.example.com/validate', { params: { value: control.value } }).pipe(
      map(response => {
        // 根据服务器响应进行验证
        if (response.valid) {
          return null; // 通过验证
        } else {
          return { invalid: true }; // 未通过验证
        }
      })
    );
  }
}

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

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

  constructor(private customAsyncValidator: CustomAsyncValidator) {
    this.myForm = new FormGroup({
      myField: new FormControl('', null, this.customAsyncValidator.validate.bind(this.customAsyncValidator)),
    });
  }
}