Angular表单删除异常：指定索引项未删，DOM移除最后一项

开发者阿泽

2026-6-28

Angular表单删除时DOM异常的解决方案

这个问题的核心是Angular的*ngFor默认追踪机制导致的DOM复用错误。当你通过索引删除FormArray中的FormControl后，*ngFor默认依赖数组元素的引用或索引进行变更检测，此时后续元素的索引会前移，Angular会错误地认为最后一个元素被移除，从而删除最后一个DOM节点，而非你指定索引的那个。

解决方法是给*ngFor添加trackBy函数，让Angular能准确识别每个表单控件的唯一标识：

步骤1：在组件类中定义trackBy函数

import { AbstractControl } from '@angular/forms';

// 用索引作为追踪标识（适用于无唯一ID的场景）
trackByControlIndex(index: number, _: AbstractControl): number {
  return index;
}

// 若表单项对应带唯一ID的数据对象，推荐用数据ID（更可靠）
trackByItemId(index: number, item: YourDataType): number {
  return item.id;
}

步骤2：在模板中绑定trackBy

修改*ngFor的模板代码，添加trackBy属性：

<!-- 直接遍历FormArray的controls时 -->
<div *ngFor="let control of formArray.controls; let i = index; trackBy: trackByControlIndex">
  <input [formControl]="control">
  <button (click)="onDelete(i)">删除</button>
</div>

<!-- 遍历绑定的数据数组（同时关联FormArray） -->
<div *ngFor="let item of dataList; let i = index; trackBy: trackByItemId">
  <input [formControl]="formArray.at(i)">
  <button (click)="onDelete(i)">删除</button>
</div>