如何聚焦使用Angular模型驱动的表单动态创建的输入字段

Question

我在Angular 7应用程序中使用模型驱动的表单，其中一个允许用户动态添加/删除一组字段。这是我的意思的直观参考：

这是我使用的FormModel：

Registry Redirector

动态属性为this.formModel = new FormGroup( { id : new FormControl(''), name : new FormControl('', Validators.required), comment : new FormControl(''), options : new FormControl(3), domain_users: new FormArray([this.createDomainUser()]) }); ，它是domain_users中的FormArray，带有3个FormGroup（域，用户名和密码）。当用户单击添加按钮时，这就是我要做的：

FormControl

我想这样，当用户单击添加按钮时，焦点将移至新创建的行的“域”字段。这样做有什么好的“角度方式”？

预先感谢

Answer 1

这是我找到的解决方案：

在HTML模板中：

<div class="ui-grid-row"
   *ngFor="let node of getDomainUsers().controls; let i = index" 
   [formGroupName]="i"
   #nodeInput>

在组件源中：

@ViewChildren('nodeInput') nodeInputs: QueryList<ElementRef>;

[...]
nodeAdd() {
  [...]

  try {
    // Try to get the first input element of the last row added
    let lastInput: HTMLInputElement = this.nodeInputs.last.nativeElement.children[0].children[0];

    lastInput.focus();
  }
  catch(e) {
    // Couldn't access the input element
  }  
}