以反应形式收听整个 FormGroup 上的模糊事件答案

【问题标题】：Listen to blur event on a whole FormGroup in a reactive form以反应形式收听整个 FormGroup 上的模糊事件
【发布时间】：2018-08-30 16:42:01
【问题描述】：

我正在创建一个大型表单，并且我想在每次用户退出字段时触发通知并保存数据（在模糊时）。问题是我无法为整个 FormGroup 找到该事件的 observable。我现在倾听价值变化，但那当然一直在发出。示例：

this.myForm.valueChanges.subscribe(() => {
    this.saveFormData();
    this.emitSaveNotification();
});

Controllers 也没有任何监听 blur 的方法，所以我无法循环 this.myForm.controls 来添加对 blur 事件的订阅。

我必须为每个元素单独添加一个事件侦听器吗？

【问题讨论】：

标签： angular

【解决方案1】：

一种解决方案是在表单中添加选项 {updateOn: 'blur'}

<form [ngFormOptions]="{updateOn: 'blur'}">

这将使值更改仅在用户模糊输入时触发，而不是在每次更改时触发，将其与您的代码一起使用应该可以工作

this.myForm.valueChanges.subscribe(() => {
     this.saveFormData();
     this.emitSaveNotification();
});

编辑 1 如果您使用的是模型驱动表单，您还可以在 FormGroup 创建时添加 updateOn 选项：

this.nameForm = new FormGroup ({
    onecontrol: new FormControl('', ),
    othercontrol: new FormControl('', )
}, { updateOn: 'blur' });

【讨论】：

目前有效。希望我不需要观察值变化或提交 =)
我很高兴这行得通！不需要观察那种事情真是太好了:)
我们中的大多数人仍然需要在 submit 和 valueChanges 上触发更改检测，因此该解决方案仅适用于狭窄的用例。
我检查了文档，但没有看到任何关于监听多个事件的内容。我尝试了{updateOn: ['blur', 'change']} 和 {updateOn: 'blur change'}，但没有成功。 Angular 团队错过了如此明显的东西似乎很奇怪，他们通常在覆盖用例方面做得很好。