Angular中的異步驗證器如何在表單驗證中使用

在Angular中，您可以使用異步驗證器來進行表單驗證。異步驗證器是一個返回Promise或Observable的驗證器函數，用來驗證表單控件的值是否有效。

要在表單驗證中使用異步驗證器，您需要在FormControl中添加一個異步驗證器函數。下面是一個示例代碼：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MyAsyncValidator } from './my-async-validator';

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

  constructor(private formBuilder: FormBuilder, private myAsyncValidator: MyAsyncValidator) {
    this.form = this.formBuilder.group({
      email: ['', [
        Validators.required,
        Validators.email
      ], [
        this.myAsyncValidator.validateEmail.bind(this.myAsyncValidator)
      ]]
    });
  }
}

在上面的代碼中，我們首先導入了FormBuilder和Validators，并創建了一個FormGroup。然后，我們在FormGroup中使用Validators.required和Validators.email來添加同步驗證器，使用this.myAsyncValidator.validateEmail.bind(this.myAsyncValidator)來添加異步驗證器。

接下來，我們需要創建一個異步驗證器的服務類，例如MyAsyncValidator：

import { Injectable } from '@angular/core';
import { AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class MyAsyncValidator {
  validateEmail(control: AbstractControl): Observable<ValidationErrors | null> {
    return of(null).pipe(
      delay(1000) // 模擬異步驗證，延遲1秒鐘
    );
  }
}

在MyAsyncValidator類中，我們創建了一個validateEmail方法，該方法接收一個AbstractControl對象并返回一個Observable。我們使用of(null)來表示驗證通過，并使用delay(1000)來模擬異步驗證，延遲1秒鐘。

最后，在模板文件中，您可以使用formGroup和formControlName指令來將表單控件綁定到FormGroup中，并使用ngIf指令來顯示驗證錯誤信息。

<form [formGroup]="form">
  <input type="email" formControlName="email">
  <div *ngIf="form.get('email').hasError('email') && form.get('email').touched">
    Please enter a valid email address.
  </div>
  <div *ngIf="form.get('email').hasError('async')">
    Validating email...
  </div>
</form>

在上面的模板中，我們綁定了一個輸入框到FormGroup中的email控件，并在其下方顯示了同步驗證錯誤信息和異步驗證加載信息。

這樣，您就可以在Angular中使用異步驗證器來進行表單驗證了。希望這可以幫助到您！