Angular中的异步电子邮件验证

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-email-verification',
  templateUrl: './email-verification.component.html',
  styleUrls: ['./email-verification.component.css']
})
export class EmailVerificationComponent {
  emailForm: FormGroup;

  constructor() {
    this.emailForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email], this.asyncEmailValidator)
    });
  }

  asyncEmailValidator(control: FormControl) {
    return new Promise((resolve, reject) => {
      // 发送验证邮件的逻辑，可以使用后端API发送邮件
      // 等待用户点击验证链接后，根据验证结果 resolve 或 reject
    });
  }

  onSubmit() {
    if (this.emailForm.valid) {
      // 处理表单提交逻辑
    }
  }
}

<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="emailForm.get('email').invalid && emailForm.get('email').touched">
      <div *ngIf="emailForm.get('email').hasError('required')">Email is required.</div>
      <div *ngIf="emailForm.get('email').hasError('email')">Invalid email format.</div>
      <div *ngIf="emailForm.get('email').pending">Verifying email...</div>
    </div>
  </div>
  <button type="submit" [disabled]="emailForm.invalid">Submit</button>
</form>