用户在FormBuilder中离开控件后如何进行表单字段验证

Question

在我的xsl:stylesheet中，我添加了对字段的验证。表单位于https://stackblitz.com/edit/angular-jx7fdu

我希望用户离开输入字段后立即进行验证。我该怎么办？我在SO上找到了这个答案，但是如果我直接使用Reactive Form而不使用FormControl似乎可以使用，因为FormBuilder似乎没有使用FormBuilder参数。 / p>

Angular2 - FormControl Validation on blur

Answer 1

输入表单时显示错误

1. 有错误
2. 被触摸或弄脏

当您聚焦于表单输入时，什么都不会改变。当您输入任何字符时，它变脏（仍然未被触摸），当您离开它时，它变脏并且被触摸。

因此，如果要显示错误消息，请在离开输入字段后，将代码更改为

(this.control.dirty || this.control.touched);

到

(this.control.dirty && this.control.touched);

因为然后您显示了验证错误，当有人同时更改并触摸了控件时，不仅是其中一个（即使您仍然专注于一个输入，这也会显示错误）。