在Angular Reactive表单中具有所需重叠的电子邮件验证

<input type="email" formControlName="email">

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function emailMatchValidator(control: AbstractControl): { [key: string]: any } | null {
  const email = control.get('email');
  const confirmEmail = control.get('confirmEmail');

  if (email.value !== confirmEmail.value) {
    return { emailMismatch: true };
  }

  return null;
}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { emailMatchValidator } from './email-match.validator';

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

  constructor(private fb: FormBuilder) {
    this.emailForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      confirmEmail: ['', Validators.required]
    }, { validator: emailMatchValidator });
  }
}

<form [formGroup]="emailForm">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="emailForm.get('email').errors?.required">Email is required.</div>
    <div *ngIf="emailForm.get('email').errors?.email">Invalid email format.</div>
  </div>
  <div>
    <label for="confirmEmail">Confirm Email:</label>
    <input type="email" id="confirmEmail" formControlName="confirmEmail">
    <div *ngIf="emailForm.errors?.emailMismatch">Emails do not match.</div>
  </div>
</form>