向 Angular 反应式 Forms 添加确认密码验证？

Question

我正在关注本教程，了解如何使用 Angular Reactive Forms 验证确认密码。

我为实现创建了一个 Stackblitz 。

确认密码 function 的实现来自教程，如下所示：

  passwordMatch(password: string, confirmPassword: string) {
    return (formGroup: FormGroup) => {
      const passwordControl = formGroup.controls[password];
      const confirmPasswordControl = formGroup.controls[confirmPassword];

      if (!passwordControl || !confirmPasswordControl) {
        return null;
      }

      if (
        confirmPasswordControl.errors &&
        !confirmPasswordControl.errors.passwordMismatch
      ) {
        return null;
      }

      if (passwordControl.value !== confirmPasswordControl.value) {
        confirmPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmPasswordControl.setErrors(null);
      }
    };
  }

如果我尝试将它添加到这样的组合验证器中：

    confirmPassword: new FormControl(
      '',
      Validators.compose([
        Validators.required,
        this.v.passwordMatch('password', 'confirmPassword'),
      ])
    ),

Angular 创建一个错误，上面写着：

ERROR
Error: Cannot read properties of undefined (reading 'password')

我们如何添加一个执行跨属性验证的验证器？

现在这个 Stackblitz 演示有效：

https://stackblitz.com/edit/angular-ivy-f5dj86?file=src%2Fapp%2Fregistration.component.ts

因为交叉密码验证被注释掉了：

    confirmPassword: new FormControl(
      '',
      Validators.compose([
        Validators.required,
        //        this.v.passwordMatch('password', 'confirmPassword'),
      ])
    ),

Answer 1

由于验证器需要访问两个密码控制值来比较它们，因此您必须将其用作 FormGroup 验证器。 所以你只需要像这样将验证器移动到FormGroup构造函数的第二个参数

public registrationForm: FormGroup = new FormGroup({
    email: new FormControl(...),
    password: new FormControl(...),
    confirmPassword: new FormControl(...),
  },
  this.v.passwordMatch('password', 'confirmPassword') 
);

干杯