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

【问题标题】：How to properly display a Validation Error using a custom Async Validator in Angular如何在 Angular 中使用自定义异步验证器正确显示验证错误
【发布时间】：2020-09-20 06:30:34
【问题描述】：

Live demo

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

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

每次我在输入字段中输入字符时都会得到渲染。

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

任何帮助将不胜感激！

【问题讨论】：

标签： angular asynchronous input

【解决方案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]
})
}

【讨论】：