在所有输入上触发模糊 Angular2 Reactive Forms

Question

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

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

请告诉我。

Answer 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();
});
}

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

在所有输入上触发模糊 Angular2 Reactive Forms

Trigger blur on all inputs Angular2 Reactive Forms

blur

angular

angular-reactive-forms