Angular响应式表单多列动态布局：FormArray适配任意列数实现

• 当前实现存在三个核心问题：
  • ngFor语法错误：单个ngFor只能遍历一个数据源，你在外层循环同时绑定modif.controls和nomColonne的写法无法正确获取列名
  • 渲染逻辑倒置：外层循环列、内层循环行，最终渲染效果是每列下方堆叠所有行的输入，和你需要的「每行横向排布对应列输入」的效果完全相反
  • 表单结构不合理：所有行、列的输入被拍平为一维FormArray，必须靠硬编码索引偏移（比如i+5）绑定控件，完全无法适配动态列数

核心是两步：先把表单结构改成行级二维结构，再把渲染顺序改成「先遍历列生成表头，再遍历行生成每行输入」，全程不需要任何硬编码列数的逻辑。

第一步：重构表单结构（适配动态列） #

把原来的一维FormArray改成行级FormArray，数组中每个元素是对应一行的FormGroup，控件key直接和列名绑定，不需要计算任何索引偏移：

// 组件类内添加getter，方便获取modif FormArray实例
get modif() {
  return this.requeteModif.get('modif') as FormArray;
}

// 初始化/动态生成表单的逻辑（替换你原来的FormArray初始化代码）
initForm() {
  // nomColonne是已有的动态列名数组，infoTable是已有的行数据数组
  this.requeteModif = this.fb.group({
    modif: this.fb.array(
      // 遍历每一行数据，生成对应行的FormGroup
      this.infoTable.map(row => {
        const rowGroup = this.fb.group({});
        // 遍历动态列名，给当前行添加对应控件，初始值取行数据里的对应列值
        this.nomColonne.forEach(colName => {
          rowGroup.addControl(colName, this.fb.control(row[colName] || ''));
        });
        return rowGroup;
      })
    )
  })
}

第二步：替换HTML渲染逻辑 #

把原来的循环顺序颠倒，先渲染表头，再遍历行渲染每行的输入框和操作按钮：

<form [formGroup]="requeteModif" class="text-center" *ngIf="tableSelect != null">
  <h5>Ajouter des informations</h5>

  <!-- 表头：横向遍历所有动态列名 -->
  <div class="row fw-bold mb-2">
    <div class="col" *ngFor="let colName of nomColonne">
      {{ colName }}
    </div>
    <!-- 预留操作列宽度 -->
    <div class="col">操作</div>
  </div>

  <!-- 遍历每一行数据生成输入组 -->
  <div class="row mb-2" formArrayName="modif" *ngFor="let rowGroup of modif.controls; let rowIndex = index">
    <!-- 绑定当前行的FormGroup -->
    <div [formGroupName]="rowIndex" class="row w-100 m-0">
      <!-- 遍历动态列名生成对应输入框，直接绑定列名 -->
      <div class="col" *ngFor="let colName of nomColonne">
        <input type="text" class="form-control" [formControlName]="colName">
      </div>
      <!-- 每行末尾的操作按钮，改为type=button避免触发整个表单提交 -->
      <div class="col">
        <button class="btn btn-primary" type="button" (click)="getRowData(rowIndex)">
          Modifier
        </button>
      </div>
    </div>
  </div>
</form>

第三步：实现行级取值逻辑 #

不需要计算任何偏移量，直接从FormArray中取对应行的值即可：

getRowData(rowIndex: number) {
  // 直接拿到当前行所有列的键值对，比如 { Col1: 'true', Col2: 'A' }
  const currentRowValue = this.modif.at(rowIndex).value;
  // 在这里写你的后续业务逻辑
  console.log(currentRowValue);
}

• 完全去掉硬编码列数/索引偏移的逻辑，nomColonne数组动态增减列时，表单结构和渲染逻辑自动适配，不需要修改任何模板代码
• 渲染效果完全符合需求：表头在顶部，每行横向排布所有列的输入，每行末尾自带操作按钮
• 取值逻辑简单直接，不需要手动拼接索引或者处理动态偏移

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