Angular新增formControl后如何无需setTimeout实现新控件聚焦

问题根源 #

你遇到的DOM更新滞后是Angular变更检测机制的正常表现：当你往FormArray中push新的FormGroup时，仅更新了内存中的表单数据模型，Angular会等待当前同步代码执行完毕后才会批量触发DOM渲染，因此同步执行push后立刻访问DOM只能拿到上一次渲染的结果。你之前使用的1ms setTimeout是临时hack方案，硬编码DOM层级路径的写法也极易因页面结构调整失效。

解决步骤 #

1. 调整HTML模板，给动态生成的输入框添加模板引用 #

找到takaNumber对应的input标签，添加#takaNumberInput标记：

<!-- 其他属性保持不变，仅添加#takaNumberInput -->
<input type="text" name="takaNumber" id="takaNumber" #takaNumberInput class="form-control" placeholder="W00001" formControlName="takaNumber" (keydown)="kd($event,0)" (focusout)="onTakaNumberChange($event,i)">

2. 组件类中注入依赖、声明元素查询 #

首先导入必要的Angular核心类，注入变更检测实例，声明QueryList接收所有动态生成的输入框：

import { ViewChildren, QueryList, ElementRef, ChangeDetectorRef } from '@angular/core';

// 组件类内部
export class YourComponent {
  // 新增属性，查询所有带#takaNumberInput标记的元素
  @ViewChildren('takaNumberInput') takaInputs: QueryList<ElementRef>;

  // 构造函数注入ChangeDetectorRef
  constructor(private cdr: ChangeDetectorRef, /* 保留你原有的其他注入如takaService等 */) {}

  // 原有其他代码...
}

3. 调整onAddTaka方法，手动触发变更检测后直接聚焦 #

在FormArray push完成后手动触发变更检测，强制DOM立刻渲染，之后直接取最后一个输入框完成聚焦：

onAddTaka() {
  let takaNum: string = '';
  const takasArr = <FormArray>this.productionForm.get('takas');
  let indx = takasArr.length - 1;
  if (indx >= 0) {
    let formGrp = takasArr.at(indx);
    let lastTakaNumber = formGrp.value.takaNumber.split(this.serialPrefix)[1];
    takaNum = this.serialPrefix + (parseInt(lastTakaNumber) + 1);
  } else {
    takaNum = this.serialPrefix + this.serialStart;
  }
  takasArr.push(
    new FormGroup({
      'takaNumber': new FormControl(takaNum, Validators.required),
      'weight': new FormControl(null, [Validators.required, Validators.min(0)]),
      'length': new FormControl(null, [Validators.required, Validators.min(0)])
    })
  );
  // 新增：手动触发变更检测，让新行立刻渲染到DOM
  this.cdr.detectChanges();
  // 新增：直接获取最后一个输入框完成聚焦
  const lastTakaInput = this.takaInputs.last;
  if(lastTakaInput) {
    lastTakaInput.nativeElement.focus();
  }
  this.onTakaNumberChange({target : { value: takaNum}},indx + 1);
}

4. 简化按键处理逻辑 #

原来kd方法中case2的setTimeout逻辑可以完全删除，调用onAddTaka即可自动完成聚焦：

case 2 : 
  this.onAddTaka();
  break;

你之前编写的updateEle和setFocus方法已经不需要，可以直接删除。

内容的提问来源于stack exchange，提问作者Mayur Chandpara