formarray - 如何正确使用 formGroup 和角度 react 形式的嵌套数据

Question

我不熟悉角度和 react 形式。

我有一个包含一些表单元素的表格，我正在尝试使用响应式(Reactive)表单来保存数据。我能够循环并呈现 json 的嵌套行为，但无法正确绑定(bind)表单数组及其控件。

formControlName 错误地循环并错误地应用于复选框和输入文本。

app.component.ts

this.userData.forEach((item)=>{
  item.info.forEach((info)=> {
    const temp = new FormGroup({
      'active': new FormControl(info.active),
      'remarks': new FormControl(info.remarks),
      'id': new FormControl(item.id),
      'name': new FormControl(info.name),
      'number': new FormControl(info.number),
      'group': new FormControl(item.group)
    });

    (<FormArray>this.userForm.controls['userDetails']).push(temp);
  });
});

app.component.html

<div>
<h3>My Form</h3> 
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <table class="table">
        <thead>
            
        </thead>
        <tbody formArrayName="userDetails">
            <ng-container *ngFor="let item of userData; let i = index" formGroupName="{{ i }}">
                <tr>
                    <td colspan="5">
                        {{item.group}}
                    </td>
                </tr>
                <tr *ngFor="let info of item.info">
                    <td>
                        <input type="checkbox" formControlName="active">
                    </td>
                    <td>
                        {{info.id}}
                    </td>
                    <td>
                        {{info.name}}
                    </td>
                    <td>
                        {{info.number}}
                    </td>
                    <td>
                        <input type="text" formControlName="remarks">
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
    <div>
        <button class="btn btn-primary" type="submit">Save</button>
    </div>
</form>
</div>

数据

userData = [
{
  "id": 123,
  "group": "A Group",
  "info": [
    {
      'name': "John Smith",
      'number': "789345612",
      'remarks': "Attended Last Session",
      'active': true
    },
    {
      'name': "Bob Mathers",
      'number': "987345120",
      'remarks': "",
      'active': false
    },
    {
      'name': "Steve Kieth",
      'number': "707549120",
      'remarks': "",
      'active': false
    }
  ]
},
{
  "id": 456,
  "group": "B Group",
  "info": [
    {
      'name': "Mia Anne P",
      'number': "880345009",
      'remarks': "",
      'active': false
    },
    {
      'name': "Mathew C Brady",
      'number': "7086183092",
      'remarks': "No Show",
      'active': false
    }
  ]
},
{
  "id": 789,
  "group": "C Group",
  "info": [
    {
      'name': "Stanley Jones",
      'number': "961096478",
      'remarks': "",
      'active': false
    },
    {
      'name': "Gina Qazyt",
      'number': "767654730",
      'remarks': "Arrived Late",
      'active': false
    }
  ]
}

]

正如您在下面的屏幕截图中看到的，json 数据 active 和 remarks 字段与表单的不匹配

我试过放置

formGroupName="{{ i }}" and i = index 

在第二个循环中，然后 formControlName="active"应用于组的每个第一行

Answer 1

不知道这是否真的是你的要求。根据您的输出，我安排了以下 FormGroup。我就是这样做的。也想看看其他人的答案。

app.component.ts

userForm: FormGroup = new FormGroup({ userGroups: new FormArray([]) });

---

this.userData.forEach(
  (item) => {

    const userGroup = new FormGroup({
      id: new FormControl(item.id),
      group: new FormControl(item.group),
      userDetails: new FormArray([])
    });

    item.info.forEach((info) => {
      const userDetail = new FormGroup({
        name: new FormControl(info.name),
        number: new FormControl(info.number),
        remarks: new FormControl(info.remarks),
        active: new FormControl(info.active)
      });
      (userGroup.controls.userDetails as FormArray).push(userDetail);
    });

    (this.userForm.controls.userGroups as FormArray).push(userGroup);
  }
);

app.component.html

<div>
  <h3>My Form</h3>
  <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
    <table class="table">
      <thead>

      </thead>
      <tbody formArrayName="userGroups">
        <ng-container *ngFor="let item of userData; let i = index" formGroupName="{{ i }}">
          <tr>
            <td colspan="5">
              {{item.group}}
            </td>
          </tr>
          <div formArrayName="userDetails">
            <tr *ngFor="let info of item.info; let j = index" formGroupName="{{ j }}">
              <td>
                <input type="checkbox" formControlName="active">
              </td>
              <td>
                {{info.id}}
              </td>
              <td>
                {{info.name}}
              </td>
              <td>
                {{info.number}}
              </td>
              <td>
                <input type="text" formControlName="remarks">
              </td>
            </tr>
          </div>
        </ng-container>
      </tbody>
    </table>
    <div>
      <button class="btn btn-primary" type="submit">Save</button>
    </div>
  </form>
</div>