Angular PrimeNG p-table可展开行嵌套FormArray索引获取问题

问题根因 #

PrimeNG p-table的rowexpansion属于独立嵌入视图，和外层普通行模板的作用域完全隔离，普通行模板中声明的let i = rowIndex索引变量无法直接在展开行模板内访问。硬编码索引0时仅能匹配第一行父项，当索引变量值为undefined时，表单控件路径会拼接为cotizacionArray -> ，直接触发控制台找不到控件的报错。

修复实现 #

1. 模板端显式获取展开行的父级索引 #

在rowexpansion模板定义处单独声明上下文索引变量，不要依赖外层行模板的变量作用域：

<p-table [value]="frmCotizacion.get('cotizacionArray').controls" dataKey="id">
  <!-- 表头定义 -->
  <ng-template pTemplate="header">
    <tr>
      <th style="width: 3rem"></th>
      <th>父表单字段1</th>
      <th>父表单字段2</th>
      <th>操作</th>
    </tr>
  </ng-template>

  <!-- 普通行模板，原有父表单绑定逻辑保留 -->
  <ng-template pTemplate="body" let-rowGroup let-i="rowIndex">
    <tr [formGroupName]="i">
      <td>
        <button pButton type="button" pRowToggler class="p-button-text p-button-rounded" icon="pi pi-chevron-down"></button>
      </td>
      <td>
        <input pInputText formControlName="campo1" />
      </td>
      <td>
        <input pInputText formControlName="campo2" />
      </td>
      <td>
        <button pButton type="button" (click)="eliminarCotizacion(i)" label="删除父项" class="p-button-danger"></button>
      </td>
    </tr>
  </ng-template>

  <!-- 展开行模板：必须在此处单独声明rowIndex拿到当前父行索引 -->
  <ng-template pTemplate="rowexpansion" let-rowGroup let-i="rowIndex">
    <tr>
      <td colspan="4">
        <div class="p-3 border-1 surface-border">
          <!-- 直接绑定当前父级表单项，再嵌套绑定子FormArray -->
          <div [formGroup]="rowGroup">
            <div class="mb-2 flex justify-content-between align-items-center">
              <span class="font-bold">子表单列表</span>
              <button pButton type="button" (click)="agregarRango(i)" label="新增子项" class="p-button-sm"></button>
            </div>
            <p-table [value]="datosRangosArray(i).controls">
              <ng-template pTemplate="body" let-rango let-j="rowIndex">
                <tr [formGroupName]="j">
                  <td>
                    <input pInputText formControlName="minimo" placeholder="最小值" class="w-full" />
                  </td>
                  <td>
                    <input pInputText formControlName="maximo" placeholder="最大值" class="w-full" />
                  </td>
                  <td>
                    <input pInputText formControlName="precio" placeholder="价格" class="w-full" />
                  </td>
                  <td>
                    <button pButton type="button" (click)="eliminarRango(i,j)" icon="pi pi-trash" class="p-button-danger p-button-sm p-button-text"></button>
                  </td>
                </tr>
              </ng-template>
            </p-table>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>
</p-table>

2. 组件端子FormArray获取方法校验 #

确保索引传入后路径拼接正确，避免返回空控件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-cotizacion-form',
  templateUrl: './cotizacion-form.component.html'
})
export class CotizacionFormComponent implements OnInit {
  frmCotizacion: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.frmCotizacion = this.fb.group({
      cotizacionArray: this.fb.array([])
    });
    // 默认新增一条父项
    this.agregarCotizacion();
  }

  // 获取父级FormArray
  get cotizacionArray(): FormArray {
    return this.frmCotizacion.get('cotizacionArray') as FormArray;
  }

  // 根据父行索引获取对应子FormArray
  datosRangosArray(parentIndex: number): FormArray {
    return this.cotizacionArray.at(parentIndex).get('rangosArray') as FormArray;
  }

  // 新增父表单项
  agregarCotizacion(): void {
    const nuevoGrupo = this.fb.group({
      campo1: ['', Validators.required],
      campo2: ['', Validators.required],
      rangosArray: this.fb.array([])
    });
    this.cotizacionArray.push(nuevoGrupo);
  }

  // 删除父表单项
  eliminarCotizacion(index: number): void {
    this.cotizacionArray.removeAt(index);
  }

  // 新增子表单项
  agregarRango(parentIndex: number): void {
    const nuevoRango = this.fb.group({
      minimo: ['', Validators.required],
      maximo: ['', Validators.required],
      precio: ['', Validators.required]
    });
    this.datosRangosArray(parentIndex).push(nuevoRango);
  }

  // 删除子表单项
  eliminarRango(parentIndex: number, childIndex: number): void {
    this.datosRangosArray(parentIndex).removeAt(childIndex);
  }

  // 提交表单
  onSubmit(): void {
    if(this.frmCotizacion.invalid) {
      this.frmCotizacion.markAllAsTouched();
      return;
    }
    // 直接取根表单值即可，所有嵌套层级数据已自动组装
    const submitData = this.frmCotizacion.value;
    console.log(submitData);
    // 调用接口提交逻辑
  }
}

注意事项 #

• 不要在rowexpansion模板内直接复用外层普通行模板声明的索引变量，嵌入视图的作用域隔离会导致变量值为undefined
• 给p-table添加dataKey属性可以避免展开行状态在新增/删除项后出现错乱
• 所有子表单的校验状态会自动同步到根表单，提交时不需要单独遍历子数组做校验

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