从 FormGroup 获取所有原生元素

Question

我正在 Angular 中实现一个响应式表单，如果表单组的控件之一无效，我想在本机元素中滚动（但还有很多其他原因需要访问本机元素，这只是众多元素之一）。

我希望 API 像这样：

for (const key in this.formGroup) {
  const control = this.formGroup[key];
  if (!control.valid) {
    control.nativeElement.scrollIntoView();
  }
}

但是，太糟糕了，不存在像 FormControl.prototype.nativeElement 这样的属性。

考虑到表单很大并且是动态生成的，所以我不能使用 @ViewChild，我该如何实现这种行为？

Answer 1

您可以使用常规 JS 查询来获取对控件的引用（必要时结合 .ng-invalid class）：

document.querySelector('[formcontrolname="firstName"]')

Get all native elements from FormGroup