具有自定义表单级验证器和更新的角度反应式表单'blur'选项不起作用

Question

我在组合时遇到问题

• 角反作用形式
• 表单级别的自定义验证器(跨字段验证器(
• "updateOn"选项设置为"blur"的用法

我做了一个简单的堆栈来显示问题：

https://stackblitz.com/edit/angular-url9uc?devtoolsheight=33&file=src/app/app.component.ts

情况1:KO

"updateOn"选项设置为"blur"。

我们可以看到，只有当我们对输入文本字段失去关注时，特定的字段验证器(必需的/电子邮件(才会被正确地激发。

但是跨字段全局验证器(检查字段是否相同(没有被触发！

情况2：正常

未定义"updateOn"选项。

我们可以看到，每当输入文本字段中的值发生变化时，都会实时正确地触发特定的字段验证器(必需的/电子邮件(。

AND跨字段全局验证器(检查字段是否相同(已正确启动！

我想我的自定义验证器或我使用它的方式有问题，但我不知道为什么

谢谢你的帮助！

Answer 1

如果您查看您的stackblitz，您会发现在buildForm()和buildForm2()中，您使用了不推荐使用的带有签名的formbuilder.group()重载：

(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; })

你应该使用类型安全的版本：

(controlsConfig: {
[key: string]: any;
}, options?: AbstractControlOptions)

这在实践中意味着什么？表单的配置部分应该有validators而不是validator(注意复数版本(：

validators: CustomValidator.equalValueValidator("email", "confirmEmail"),

然后一切都将按预期工作，updateOn将实际用于验证器。