在所有输入Angular2反应形式上触发模糊答案

【问题标题】：Trigger blur on all inputs Angular2 Reactive Forms在所有输入Angular2反应形式上触发模糊
【发布时间】：2018-03-13 21:53:15
【问题描述】：

我有一个非常大的表单，其中许多部分表示为单独的表单组。在每个部分的末尾我都有一个检查按钮，用于检查该表单组中所有控件的有效性，目前如下

checkValidity(g: FormGroup) {
    Object.keys(g.controls).forEach(key => {
      g.get(key).markAsDirty();
    });
    Object.keys(g.controls).forEach(key => {
      g.get(key).markAsTouched();
    });
  }

它工作正常，但是因为我的通用验证器检查并处理每个控件的输入模糊事件的验证消息，验证消息本身不会弹出，直到我聚焦和模糊一个控件之后。因此，我想在上面的方法中添加一些内容，以触发表单组中每个表单控件上的模糊事件，但我无法弄清楚该怎么做。

document.getElementById("myAnchor").blur();来自W3Schools 展示了我如何通过 id 获取元素并以这种方式触发它的 blur()。使用上面的方法，我是否能够使用 forEach 访问 FormGroup 中的所有元素以触发所有内容的模糊？（输入、文本区域、单选按钮和复选框）

请告诉我。

【问题讨论】：

你可以试试document.activeElement.blur()
有没有一种方法可以遍历 FormGroup 的所有元素，并对上述方法中的每个元素都进行遍历？
不，FormGroup 没有对元素的引用。它们通过桥连接。有一种方法是猴子修补
如何遍历整个文档，如果 input/textArea 的 id/name 包含子字符串或其他内容，则模糊该 input/textArea？这样的事情可能吗？我对 javascript/typescript 非常残忍。我在进行工作项目时正在学习这一点。
猴子补丁？

标签： angular blur angular-reactive-forms

【解决方案1】：

我刚刚想出了一个解决这个问题的方法，它不涉及触发模糊或任何 DOM 事件。在为之前的问题发现了 updateValueAndValidity() 之后，我在表单组中的每个控件上调用它，就像我在问题中将所有控件标记为脏并触及一样。如下所示。

  checkValidity(g: FormGroup) {
Object.keys(g.controls).forEach(key => {
  g.get(key).markAsDirty();
});
Object.keys(g.controls).forEach(key => {
  g.get(key).markAsTouched();
});
Object.keys(g.controls).forEach(key => {
  g.get(key).updateValueAndValidity();
});
}

这会在表单组中的每个控件下正确显示验证错误消息，以前我必须集中注意力然后模糊任何控件才能发生这种情况。

【讨论】：