Angular：formarray内部formarray中未在formControl上设置值

Question

我有一个包含一个formarray的表单，您可以动态添加值，在这种情况下，我可以通过FormControl获得值。

firstGroup = this._formBuilder.group({
dataArray: new UntypedFormArray([]),  });

在第一个formarray中，还有另一个formarray也可以添加值，但是在第二个formarray中，尽管它能够通过选择框更改值，但关联的FormControl不会注册所选的值。

    const line = new UntypedFormGroup({
      chooseOption1: new UntypedFormControl('', Validators.required),
      secondDataArray: new UntypedFormArray([]),
    });
    this.firstGroup.controls.dataArray.push(line);
  }

  addInnerLine(i: any) {
    const control = <UntypedFormArray>(
      this.dataArray.controls[i].get('secondDataArray')
    );
    control.push(this.addInnerLineData());
  }

  addInnerLineData() {
    return new UntypedFormGroup({
      qtd: new UntypedFormControl(),
    });
  }

我认为问题在于我定义了桌子，但是我尝试了很多事情，但我仍然无法解决。

            <table
              mat-table
              [dataSource]="dataArray.controls[i].value.secondDataArray"
              formArrayName="secondDataArray"
              class="mat-elevation-z8"
            >
              <ng-container matColumnDef="qtd">
                <th mat-header-cell *matHeaderCellDef>QTD</th>
                <td mat-cell *matCellDef="let row; let index = index">
                  <mat-form-field appearance="outline">
                    <mat-select formControlName="qtd" name="qtd">
                      <mat-option *ngFor="let ob of exampleData" [value]="ob">
                        {{ ob.symbol }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayColumns"></tr>
            </table>

stackblitz

有人可以帮我吗？

Answer 1

经过多次尝试并阅读并查看了很多示例，我找到了解决方案。

首先，我创建了一个辅助阵列。

  auxDataSource: any = [];

当我添加新的内线时，我将AuxDataSource转换为新的MattabledataSource

  addInnerLine(i: any) {
    const control = <UntypedFormArray>(
      this.dataArray.controls[i].get('secondDataArray')
    );
    control.push(this.addInnerLineData());
    this.dataSource[i] = control.controls;
    this.auxDataSource[i] = new MatTableDataSource(this.dataSource[i]);
  }

，最后我将html上的表更改为：

          <ng-container formArrayName="secondDataArray">
            <mat-table *ngIf="auxDataSource[i]" [dataSource]="auxDataSource[i]">
              <!-- Qtd Column -->
              <ng-container matColumnDef="qtd">
                <mat-header-cell *matHeaderCellDef> Qtd </mat-header-cell>
                <mat-cell
                  *matCellDef="let element; index as t"
                  [formGroup]="element"
                >
                  <mat-form-field appearance="outline">
                    <mat-select formControlName="qtd" name="qtd">
                      <mat-option
                        *ngFor="let sind of exampleData"
                        [value]="sind"
                      >
                        {{ sind.name }}
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </mat-cell>
              </ng-container>
              <mat-header-row
                *matHeaderRowDef="displayColumns"
              ></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayColumns"></mat-row>
            </mat-table>
          </ng-container>

我已更新 stackblitz