如何在 Angular 中使用自定义异步验证器正确显示验证错误

Question

现场演示

从这个演示中可以看出，当您在旧密码输入字段中键入字符时，带有错误“旧密码不匹配”的 div 元素会不断在浏览器中呈现，从而导致糟糕的用户体验。 这个元素：

<div *ngIf="oldpassword.errors.oldPasswordInvalid">Old password doesn't match.</div>

每次我在输入字段中键入字符时，都会不断渲染。

我使用了 setTimeout() function 来模拟对服务器的调用。

任何帮助将不胜感激！

Answer 1

我们可以在构建表单时放置 updateOn:'blur'，如下所示： 这种方法的唯一问题是当用户在输入字段中键入时不会呈现错误。

  constructor(fb: FormBuilder){
  this.form = fb.group({
  oldpassword:['',
  {validators: [Validators.required],
  asyncValidators: [SignUpValidators.oldPasswordInvalid],updateOn:'blur'}],
  newpassword: ['', Validators.required],
  confirmpassword:['',Validators.required]
})
}