从FormGroup获取所有本机元素

Question

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

我期望这样的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类结合使用）

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