Angular自定义密码匹配表单验证器失效问题求助

你代码里的核心问题是自定义验证器的挂载位置错误——你把controlValuesAreEqual当成了一个表单控件写在了formBuilder.group的控件列表里，而不是作为表单组的验证器传入。

修正后的TS代码（重点修改ngOnInit部分） #

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { UntypedFormGroup, UntypedFormBuilder, Validators, ValidatorFn, AbstractControl, ValidationErrors, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss'],
})
export class SignupComponent implements OnInit {
  public signupForm!: UntypedFormGroup;

  constructor(
    private formBuilder: UntypedFormBuilder,
    private http: HttpClient,
    private router: Router
  ) {}
  ngOnInit(): void {
    this.signupForm = this.formBuilder.group({
      email: ['', Validators.required],
      name: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['',Validators.required]
    }, { 
      // 把自定义验证器放在表单组的验证器配置里
      validators: this.controlValuesAreEqual('password', 'confirmPassword')
    });
  }
  private controlValuesAreEqual(controlNameA: string, controlNameB: string): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const formGroup = control as FormGroup
      const valueOfControlA = formGroup.get(controlNameA)?.value
      const valueOfControlB = formGroup.get(controlNameB)?.value

      if (valueOfControlA === valueOfControlB) {
        return null
      } else {
        return { valuesDoNotMatch: true }
      }
    }
  }
  signUp() {
    this.http
      .post<any>('http://localhost:3000/signupUsers', this.signupForm.value)
      .subscribe({
        next: (res) => {
          this.signupForm.reset(), this.router.navigate(['login']);
        },
        error: (e) => alert('Something went wrong'),
      });
  }
}

补充：模板里显示密码不匹配错误 #

如果需要在模板里直观提示用户密码不匹配，可以在confirmPassword的输入框区域添加错误提示：

<mat-form-field appearance="outline" class="w-100">
  <mat-label>Confirm Password</mat-label>
  <input
    type="password"
    formControlName="confirmPassword"
    matInput
    placeholder="password"
  />
  <mat-hint align="start">
    <strong>{{ signupForm.valid }}</strong>
  </mat-hint>
  <!-- 添加密码不匹配的错误提示 -->
  <mat-error *ngIf="signupForm.hasError('valuesDoNotMatch')">
    两次输入的密码不匹配
  </mat-error>
</mat-form-field>

原理说明：formBuilder.group的第二个参数是表单组的配置对象，其中validators属性用来指定表单级别的验证器。之前的写法相当于给表单添加了一个名为validators的无效控件，完全没有触发密码一致性的校验逻辑，所以表单的valid状态无法正确反映校验结果。

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