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

Question

实时演示

正如您在这个演示中看到的，当您在Old Password输入字段中键入字符时，div元素会出现错误"；旧密码不匹配"；不断在浏览器中渲染，使其处于糟糕的用户体验中。此元素：

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

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

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

任何帮助都将不胜感激！

Answer 1

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

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