尝试将光标定位在保存时的第一个错误中

Question

鉴于Angular中的一个表单，当用户按下Save时，我试图将光标定位在第一个错误上。我可以找到有错误的字段，将光标定位似乎更加难以捉摸：

    const pageControls = Object.keys(this.myForm.form.controls);
    let first = false;
    for (let i = 0; i < pageControls.length; i++) {
        if (this.myForm.form.controls[pageControls[i]].invalid) {
          first = true;
          if (first) {
            const x = document.getElementsByName(pageControls[i]);
            console.log(x);
            x[0].focus();  //does not work

          }

        }
    }

我还看到了其他帖子，人们在其中为每个表单字段声明元素引用：https://coderanch.com/t/675897/languages/programmatically-manage-focus-Angular-app

这将导致大量样板代码，我正在尝试使其尽可能地通用。