Angular自定义验证控件无法获取表单值问题求助

你将matchPwdValidator绑定到了confirmPwd单个表单控件上，此时验证器函数内的control指向的是单个confirmPwd控件，而非整个表单组。因此调用control.get("password")和control.get("confirmPwd")必然返回undefined，导致验证逻辑始终判定密码不匹配。

1. 调整验证器绑定位置 #

将密码匹配验证器绑定到整个表单组，而非单个confirmPwd控件。

2. 优化验证器逻辑 #

增加控件存在性判断，仅在确认密码框已交互时触发匹配校验，避免初始状态误判错误。

3. 实时触发校验 #

监听密码框内容变化，手动更新确认密码框的验证状态，确保密码修改时同步校验匹配性。

form-validators.ts #

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

export class FormValidators {
  // ...保留其他验证器

  static matchPwdValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      // 此时control为整个表单组，可正确获取子控件
      const password = control.get("password");
      const confirmPwd = control.get("confirmPwd");

      // 控件未初始化时不返回错误
      if (!password || !confirmPwd) {
        return null;
      }

      // 仅在确认密码框已输入/交互时校验匹配
      if ((confirmPwd.dirty || confirmPwd.touched) && password.value !== confirmPwd.value) {
        return { PwdNotMatched: true };
      }

      return null;
    };
  }
}

form.component.ts #

import { Component } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { FormValidators } from "../utilities/form-validators";

@Component({
  selector: "app-form",
  templateUrl: "./form.component.html",
  styleUrls: ["./form.component.scss"],
})
export class FormComponent {
  
  cpwdError: boolean = false;
  sampleForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.sampleForm = this.formBuilder.group(
      {
        // ...保留其他表单控件
        password: ["", FormValidators.passwordValidator()],
        confirmPwd: [""] // 移除单个控件上的匹配验证器
      },
      {
        validators: FormValidators.matchPwdValidator() // 绑定到表单组
      }
    );

    // 密码变化时同步更新确认密码的验证状态
    this.sampleForm.get('password')?.valueChanges.subscribe(() => {
      this.sampleForm.get('confirmPwd')?.updateValueAndValidity({ emitEvent: false });
    });

    this.sampleForm.get('confirmPwd')?.statusChanges.subscribe(() => {
      this.updateErrorFlags('confirmPwd');
    });
  }

  private updateErrorFlags(controlName: string): void {
    const control = this.sampleForm.get(controlName);
    if (control) {
      switch (controlName) {
        // ...保留其他case
        case 'confirmPwd':
          // 从表单组获取错误（验证器挂载在表单组上）
          this.cpwdError = this.sampleForm.hasError('PwdNotMatched') && control.dirty;
          break;
      }
    }
  }
}

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