Angular 6：如何在保存事件上绑定formArray值？

Question

我有一个包含数组值的表单。值以完美的形式显示，但在保存值时它没有绑定整个数组值；而不是它仅绑定最后更改的值。

此外，formControlName="id" 属性值未绑定到 formArray 对象。

App.component.ts

initializRecords(data?: any) {
  this.dataForm = this.formBuilder.group({
    dataCollection: this.formBuilder.group({
      id: new FormControl(),
      sizeId: new FormControl(),
      sizes: this.formBuilder.group({
        qty: new FormControl([])
      })
    })
  });
}

App.component.html

<form [formGroup]="dataForm">
  <div class="container">
    <div class="row">
      <div class="col">
        <button mat-raised-button color="primary" (click)="saveRecords()">Save</button>
      </div>
    </div>
    <div formArrayName="dataCollection">
      <div class="row" *ngFor="let element of data; let first = first">
        <div *ngIf="!first">----------</div>
        <ng-container *ngFor="let subElement of element.sizes">
          <div class="col">
            <mat-form-field class="">
              <input matInput type="text" formControlName="id" value={{element.value}} readonly>
            </mat-form-field>
            <mat-form-field class="">
              <input matInput type="text" value={{subElement.subValue}} readonly>
              <input type="hidden" formControlName="sizeId">
            </mat-form-field>
            <div formGroupName="sizes">
              <mat-form-field class="">
                <input matInput type="text" formControlName="qty"  value={{subElement.qty}}>
              </mat-form-field>
            </div>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</form>

===更新===

单击保存事件后，我希望最后的 JSON 像下面这样的结构，因为值是每行显示的。

{
  "data": [
  { "id": 1, "sizeId": 1, "qty": 10 },
  { "id": 1, "sizeId": 2, "qty": 1 },
  { "id": 1, "sizeId": 3, "qty": 1 },
  { "id": 2, "sizeId": 1, "qty": 50 },
  { "id": 2, "sizeId": 2, "qty": 60 },
  { "id": 2, "sizeId": 3, "qty": 70 },
]}

Answer 1

我觉得你对表格的使用不是很好

您有 2 种不同类型的数据，一种是 'Lorium'，另一种是 'Ipsum'。我认为您应该首先在 dataCollection 上定义一个数组，在其中创建 2 个不同的数组 FormGroup.

然后在每个 FormGroup 中，您将拥有一个包含所有子元素的数组。

我不确定你需要什么，并尝试用你的程序做什么，但这样，你将拥有你想要的所有数量。

我用这种思维方式与您分享一个有效的example。如果你认为我误解了什么请告诉我。

此外，您可以在每个 FormGroup 上添加您需要的任何 FormControl 以使表格适合您的 json 数据。

最后，如果您想要满足您的要求 JSON，只需遍历您的元素以将它们添加到对象中。

Angular 6：如何在保存事件上绑定formArray值？

Angular 6: How to bind the formArray value on save event?

angular

angular-reactive-forms

formarray