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

Question

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

这是我使用的FormModel：

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 ，它是具有3个FormControl （域，用户名和密码）的FormArray的FormGroup 。 当用户单击添加按钮时，这就是我要做的：

let du = this.formModel.get('domain_users') as FormArray;

if(nodes) {
  nodes.push(this.createDomainUser());
}

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

提前致谢，

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
  }  
}