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

Question

在我的Reactive Form中，我为字段添加了验证。表格位于https://stackblitz.com/edit/angular-jx7fdu

我希望在用户离开输入字段后进行验证。我怎么能做到？我在 SO 上找到了这个答案，但如果我FormControl直接使用而不是 with似乎它会起作用，FormBuilder因为它似乎FormBuilder不带AbstractControlOptions参数。

Angular2 - FormControl 验证模糊

标签： angular6

Answer 1

当表单输入时，您显示错误

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

当您关注表单输入时，没有任何变化。当您输入任何字符时，它会变脏（仍然未触及），当您离开它时，它会变脏并被触摸。

因此，如果您希望在离开输入字段后显示错误消息，然后将您的代码从

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

到

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

因为那时你会显示验证错误，当有人更改并触摸一个控件时，而不仅仅是任何一个（即使你仍然专注于一个输入，也会显示错误）。