Angular 调用验证函数后使窗体有效时出现问题

我的密码验证字段有问题。在我的表单中，我有3个字段，一个是旧密码，另一个是新密码以及确认新密码。到目前为止，如果用户输入新密码并确认密码，则该表单将变为有效，并可以提交。现在，如果字段不匹配，他编辑确认密码，它将是有效的。但如果他对新密码进行编辑，则不会

下面是一个检查这两个字段的函数，当我更改其中一个密码字段时，我看到它被触发，但它只在最后一次确认时使表单有效

  static passwordMatchValidator(control: AbstractControl) {
    const password: string = control.get('newPassword').value; // get password from our password form control
    const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
    // compare is the password math
    if (password !== confirmPassword) {
      // if they don't match, set an error in our confirmPassword form control
      console.log('No mathch' + password + ' - ' + confirmPassword)
      control.get('confirmPassword').setErrors({ NoPassswordMatch: true });
   }
  //  else {
  //    control.get('confirmPassword').setErrors({ NoPassswordMatch: false});
  //   }
  }

这里还有一个stackblitz示例，演示了这个问题。请忽略布局，因为我不想花太多时间让它看起来和我的应用程序一样

---

如果密码不匹配，您只需返回一个对象（解释错误）

static passwordMatchValidator(control: AbstractControl) {
  const password: string = control.get('newPassword').value; // get password from our password form control
  const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
  // compare is the password math
  if (password !== confirmPassword) {
    return {matchError: 'Passwords do not match'}
  }
}

---

如果密码不匹配，您只需返回一个对象（解释错误）

static passwordMatchValidator(control: AbstractControl) {
  const password: string = control.get('newPassword').value; // get password from our password form control
  const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
  // compare is the password math
  if (password !== confirmPassword) {
    return {matchError: 'Passwords do not match'}
  }
}

---

您可以按如下方式重置错误：

---

control.get（'confirmPassword'）.setErrors（null）
您可以按如下方式重置错误：

control.get（'confirmPassword'）.setErrors（null）
在验证后添加一个else语句，并将所有错误设置为null:
control.get（'confirmPassword'）。setErrors（null）；control.get（'newPassword'）.setErrors（null）
else控件.get（'confirmPassword'）.setErrors（null）；我不想清除新密码错误，因为可能会有其他错误，这意味着我覆盖了其他验证。没问题-将添加我的答案，您可以标记为已接受…不确定是否要将所有字段设置为有效，因此我建议两者都设置！验证后添加else语句，并将所有错误设置为null:
control.get（'confirmPassword'）。setErrors（null）；control.get（'newPassword'）.setErrors（null）
else控件.get（'confirmPassword'）.setErrors（null）；我不想清除新密码错误，因为可能会有其他错误，这意味着我覆盖了其他验证。没问题-将添加我的答案，您可以标记为已接受…不确定是否要将所有字段设置为有效，因此我建议两者都设置！在一定程度上感谢你的作品，但为我打破了错误信息。简单的修复方法是控件.get（'confirmPassword'）.setErrors（null）；在else语句中，清除错误并使表单有效在一定程度上感谢工作，但为我中断了错误消息。简单的修复方法是控件.get（'confirmPassword'）.setErrors（null）；在else语句中，清除错误并使窗体有效