Angular FormArray嵌套FormGroup如何自动填充序号setNumber值

核心实现逻辑 #

• setNumber字段不需要用户手动输入，值完全由组件逻辑根据循环位置自动维护
• 字段值实时同步到对应FormGroup，提交时自动纳入表单数据，不需要提交前额外遍历赋值
• 字段与name、gender同区域展示，同时解决StackBlitz环境的TS类型报错

分步实现 #

1. 调整父组件（input-array.component）逻辑 #

首先在组件类中新增类型安全的getter，彻底解决StackBlitz的类型校验报错，替代模板里的$any()临时转换：

// 记得在文件头部引入FormGroup类型
get userFormGroups(): FormGroup[] {
  return this.userArray.controls as FormGroup[];
}

新增序号统一刷新方法，在新增表单项、删除表单项之后调用，保证序号连续不混乱：

refreshSetNumber(): void {
  this.userFormGroups.forEach((group, index) => {
    // 序号从1开始计数就传index+1，从0开始就直接传index
    group.get('setNumber')?.setValue(index + 1, { emitEvent: false });
  });
}

注意：{ emitEvent: false }用于阻止setValue触发valueChanges事件，避免多余的校验、联动逻辑重复执行。

修改模板的循环块，给子组件传入当前循环序号，替换原来仅在span展示序号的逻辑：

<div *ngFor="let u of userFormGroups; index as i"> 
  <span>Set {{ i + 1 }}</span>
  <!-- 新增setIndex输入绑定，把当前序号传给子组件 -->
  <app-input [inputFormGroup]="u" [setIndex]="i"></app-input>
  <button (click)="removeUser(i)">Delete</button>
</div>

在新增用户、删除用户的方法逻辑末尾，调用this.refreshSetNumber()即可自动维护所有项的setNumber值。

2. 调整子组件（app-input）逻辑 #

首先在组件类中声明输入属性接收父组件传入的序号：

@Input() inputFormGroup!: FormGroup;
@Input() setIndex!: number;

修改子组件模板，移除原来setNumber对应的可编辑输入框，在name、gender字段相邻位置直接展示自动同步的序号值即可：

<!-- 保留原有name、gender输入控件 -->
<div class="form-control-item">
  <label>姓名</label>
  <input type="text" formControlName="name">
</div>
<div class="form-control-item">
  <label>性别</label>
  <input type="text" formControlName="gender">
</div>
<!-- setNumber直接展示文本，不需要用户输入 -->
<div class="form-control-item">
  <label>组序号</label>
  <span class="set-number-text">{{ inputFormGroup.get('setNumber')?.value }}</span>
</div>

如果需要彻底防止程序逻辑意外修改setNumber值，可以在初始化FormGroup时给setNumber加disabled: true配置，注意此时提交表单需要调用this.getUserForm.getRawValue()才能获取到disabled字段的值，普通的.value会跳过disabled控件。

效果验证 #

• 新增、删除任意位置的表单项，setNumber都会自动刷新为正确的连续序号
• 页面上序号与name、gender字段相邻展示
• 表单提交时setNumber会自动出现在提交数据结构中，不需要额外处理
• StackBlitz环境的TS类型报错完全消除，和本地开发环境表现一致

内容的提问来源于stack exchange，提问作者Dan Bennett