Angular：如何独立验证两组字段（邮箱与密码确认）

你的代码核心问题在于自定义验证器matchData仅处理了密码匹配校验，完全忽略了邮箱的匹配逻辑，且当前逻辑会导致只要密码匹配就直接返回null，即便邮箱不匹配也不会触发对应的错误提示。以下是修复后的完整实现：

修复后的 TypeScript 代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl, ValidationErrors } from '@angular/forms';

export class RegistrationComponent implements OnInit {
  loginForm!: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
      email1: ['', { validators: [Validators.required] }],
      email2: ['', { validators: [Validators.required] }],
      password1: ['', { validators: [Validators.required] }],
      password2: ['', { validators: [Validators.required] }]
    }, { validators: this.matchGroups() });
  }

  get email1() { return this.loginForm.controls['email1']; }
  get email2() { return this.loginForm.controls['email2']; }
  get password1() { return this.loginForm.controls['password1']; }
  get password2() { return this.loginForm.controls['password2']; }

  // 重构验证器，独立校验邮箱和密码两组字段
  private matchGroups(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const errors: ValidationErrors = {};

      // 校验邮箱匹配
      const emailOne = control.get('email1')?.value;
      const emailTwo = control.get('email2')?.value;
      if (emailOne !== emailTwo) {
        errors['noMatchEmail'] = true;
      }

      // 校验密码匹配
      const passwordOne = control.get('password1')?.value;
      const passwordTwo = control.get('password2')?.value;
      if (passwordOne !== passwordTwo) {
        errors['noMatchPass'] = true;
      }

      // 如果有错误则返回，否则返回null
      return Object.keys(errors).length > 0 ? errors : null;
    };
  }
}

关键修改说明 #

• 重构了验证器方法matchGroups，直接在方法内获取表单控件值，避免冗余参数传递
• 分别独立校验邮箱和密码的匹配状态，将所有不匹配的错误收集到同一个errors对象中，避免单一错误覆盖其他错误
• 仅当存在错误时返回错误对象，否则返回null，确保两组校验互不干扰

修复后的 HTML 代码 #

<!-- 邮箱输入组 -->
<input type="email" formControlName="email1">
<div *ngIf="email1.errors?.['required']">邮箱地址为必填项</div>

<input type="email" formControlName="email2">
<div *ngIf="email2.errors?.['required']">邮箱地址为必填项</div>
<div *ngIf="loginForm.hasError('noMatchEmail')">两次输入的邮箱不匹配</div>

<!-- 密码输入组 -->
<input type="password" formControlName="password1">
<div *ngIf="password1.errors?.['required']">密码为必填项</div>

<input type="password" formControlName="password2">
<div *ngIf="password2.errors?.['required']">密码为必填项</div>
<div *ngIf="loginForm.hasError('noMatchPass')">两次输入的密码不匹配</div>

额外优化建议（可选） #

如果想让表单结构更清晰，可以将邮箱和密码分别封装为子表单组，实现更模块化的验证逻辑：

// ngOnInit 中的表单构建修改为：
this.loginForm = this.formBuilder.group({
  emailGroup: this.formBuilder.group({
    email1: ['', Validators.required],
    email2: ['', Validators.required]
  }, { validators: this.matchFields('email1', 'email2', 'noMatchEmail') }),
  passwordGroup: this.formBuilder.group({
    password1: ['', Validators.required],
    password2: ['', Validators.required]
  }, { validators: this.matchFields('password1', 'password2', 'noMatchPass') })
});

// 通用字段匹配验证器
private matchFields(field1: string, field2: string, errorKey: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const val1 = control.get(field1)?.value;
    const val2 = control.get(field2)?.value;
    return val1 !== val2 ? { [errorKey]: true } : null;
  };
}

对应的HTML需要调整为子表单组的路径，比如emailGroup.email1。

内容的提问来源于stack exchange，提问作者MarieSpeak