angular - 基于 JSON 的 Angular 响应式表单中的嵌套 FormArray

Question

我的 JSON 结构如下...

data = {
  groups: [
    {
      name: 'Primary',
      people: [
         {
           name: 'Jordan',
           begCount: 23,
           endCount: 41
         },
         {
           name: 'Mike',
           begCount: 18,
           endCount: 24
         }
      ]
    },
    {
      name: 'Secondary',
      products: [
         {
           name: 'David',
           begCount: 23,
           endCount: 41
         },
         {
           name: 'Greg',
           begCount: 18,
           endCount: 24
         }
      ]
    },
    {
      name: 'Third',
      products: [
         {
           name: 'Josh',
           begCount: 23,
           endCount: 41
         },
      ]
    }
  ]
};

根据 API 调用，此数据可能具有不同数量和值的“人”。我正在尝试使用 FormBuiler、FormGroup 和 FormArray 来创建一个反应式表单并修补数据中的值，但我无法弄清楚这一点。这是使用上述返回数据的 UI 的图像...

我试图创建一个 FormGroup 的两个实例，每个实例都有一个数组，但我无法让它工作。只是寻找一些关于如何设置它的指针......不担心总数，一旦我正确嵌套数组，我就可以弄清楚。

我当前的 HTML 看起来像这样......

<form [formGroup]="groupForm">
  <table *ngFor="let group of data.groups">
    <thead>
      <th class="group-name">{{group.name}}</span></th>
      <th>Beginning Tally</th>
      <th>Ending Tally</th>
      <th>Total</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of group.people;  let i=index" formArrayName="people" [formGroupName]="i">
        <td><input type="text" formControlName="name"></td>
        <td><input type="number" formControlName="begCount"></td>
        <td><input type="number" formControlName="endCount"></td>
        <td><input type="number" disabled></td>
      </tr>
      <tr class="grand-total">
        <td></td>
        <td></td>
        <td class="total-label grey"><span>Totals</span></td>
        <td class="grey"></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</form>

标签： angulartypescriptangular-reactive-formsangular-formsformarray