在 angular 响应式表单中，formarray 的序号字段（如 operational_sequence_no）不能通过 html value 属性或插值绑定实现动态更新；必须在 formcontrol 初始化时赋予正确值，并在增删行时主动维护序号一致性。
在 angular 响应式表单中，formarray 的序号字段（如 operational_sequence_no）不能通过 html value 属性或插值绑定实现动态更新；必须在 formcontrol 初始化时赋予正确值，并在增删行时主动维护序号一致性。
在使用 FormArray 管理动态表单项（如预处理规则列表）时，一个常见误区是试图通过模板中的 value="{{i+1}}" 或 [value]="i+1" 让输入框“自动显示当前序号”。但这是无效的——因为 FormControl 已接管该控件的值管理，HTML value 属性仅在初始化时生效，后续不会响应索引变化，导致所有行都显示为 1。
✅ 正确做法是：将序号作为 FormControl 的初始值写入模型层，而非依赖视图层渲染。
1. 初始化时注入正确序号
在创建新表单项时，根据当前 FormArray 长度计算并设置序号：
newArithmeticItem(): FormGroup {
const nextSeq = this.arithmeticItems.length + 1;
return new FormGroup({
operational_sequence_no: new FormControl(nextSeq),
// 其他字段...
});
}
addArithmeticItem(): void {
this.arithmeticItems.push(this.newArithmeticItem());
}⚠️ 注意：this.arithmeticItems.length 是安全的，因 FormArray#push() 同步更新长度，无需异步等待。
2. 删除后重置序号（关键！）
删除某一行后，后续序号会断层（如删第2项后，原第3、4项仍为3、4，应变为2、3）。需遍历并重赋值：
removeArithmeticItem(index: number): void {
this.arithmeticItems.removeAt(index);
// 重新编号所有剩余项（从 1 开始）
this.arithmeticItems.controls.forEach((control, i) => {
control.get('operational_sequence_no')?.patchValue(i + 1);
});
}3. 模板中只需绑定 FormControl，无需手动设 value
<td class="mat-cell">
<mat-form-field appearance="outline" style="width: 4rem; text-align: center;">
<input matInput
formControlName="operational_sequence_no"
type="text"
readonly>
</mat-form-field>
</td>✅ 此时输入框将准确显示 FormControl 当前值（即维护后的序号），且完全受响应式表单控制，无弃用警告。
? 补充建议
- 避免 ngModel：虽然 [ngModel] 可临时绕过问题，但已废弃且与响应式表单混合使用易引发状态不一致。
-
封装 getter 提升可读性（推荐）：
get arithmeticItems(): FormArray { return this.PreprocessingForm.get('arithmeticItems') as FormArray; } - 考虑不可变序号？ 若业务允许，也可将序号设为只读标识（非表单字段），改用 <td>{{ i + 1 }}</td> 显示逻辑序号，而 operational_sequence_no 仅用于后端标识——此时需确保其值在提交前与 UI 序号严格对齐。
遵循上述模式，即可实现 FormArray 序号的可靠生成、动态更新与数据一致性保障。
