angular 表格 'confirm password' 显示错误

Question

我正在使用 angular 表单来创建注册表单。我制作了一个自定义验证器，用于检查密码是否与确认密码字段相同。虽然没有显示'password do not match'的错误，但是直到所有的字段都输入完后，输入还是红色的。

带有自定义验证器方法的表单生成器checkPasswords

this.registerForm = this.formBuilder.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
  confirmPassword: ['', [Validators.required]]
  },
  { validator: this.checkPasswords });


checkPasswords(group: FormGroup) {
  // here we have the 'passwords' group
  let pass = group.get('password').value;
  let confirmPassword = group.get('confirmPassword').value;
  return pass === confirmPassword ? null : { notSame: true };
}

和下面的html

<mat-form-field required>
    <input matInput type="password" placeholder="Password" formControlName="password">
    <mat-error>Password is not valid</mat-error>
</mat-form-field>

<mat-form-field required>
    <input matInput type="password" placeholder="Confirm password"
           formControlName="confirmPassword"
           [errorStateMatcher]="matcher">
    <mat-error *ngIf="registerForm.hasError('notSame')">Passwords do not match</mat-error>
</mat-form-field>

我试过调试，我认为这是因为表单组状态是 'invalid' 直到输入所有字段，但是 confirmPassword 的表单组控件显示有效。如何获取 confirmPassword 的状态以使用其控件的状态？

谢谢

Answer 1

所有输入都是红色的吗？

可能 material 输入首先检查控件是否被触摸或变脏（在将其标记为红色之前），但如果表单本身无效，它会立即将其标记为红色。

查看代码，似乎 registerForm 末尾的验证器在用户填写 confirmPassword 字段之前运行，标记 registerForm 无效。

选项：

如何将 checkPasswords 验证器专门应用于 confirmPassword 而不是整个表单？
在checkPasswords中，检查confirmPassword控件是否被触摸或弄脏（notSame除外）。

Answer 2

这是因为angular material。如果给定的控件没有错误，<mat-error> 将不可见。您需要在 confirmPassword 字段上设置错误以显示错误。

angular 表格 'confirm password' 显示错误

angular forms 'confirm password' showing error

formbuilder

angular

angular-reactive-forms

选项：