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

问题描述

我有一个带有数组值的表格。值以完美的形式显示，但是在保存值时并未绑定整个数组的值；而不是仅绑定最后更改的值。

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

StackBlitz working demo。

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 },"sizeId": 3,{ "id": 2,"qty": 50 },"qty": 60 },"qty": 70 },]}

解决方法

我认为您使用表格的方式不是很好。

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

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

我不确定您需要什么并尝试使用该程序进行编程，但是通过这种方式，您将可以根据需要存储所有数量。

我以这种思维方式与您分享工作中的example。如果您认为我误解了，请告诉我。

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

最后，如果要适合所需的JSON，只需遍历元素以将其添加到对象中即可。