Angular：formGroup中嵌套formArray，在formArray中存放的可编辑table中的字段的动态展示

今天做的项目中做了一个新增页面，其中最顶级是一个formGroup表单命名为editClauseForm，里面有几个单独的字段，还有一个嵌套的formArray，命名为clauseArr，这个clauseArr中存放一个用户自己可填写的table。其中有一个“默认人员”字段是弹窗中选择人员之后把名称带出来填到这个字段中：

关闭弹窗后用户名称name已经拿到了，但是我发现在ts上不知道怎么绑定到这个input中，用了purchaseFlowTempDetailVOList.value[this.editIndex].defaultRole.setValue()等方法，都是发现能改变table里面的字段值，但是没有动态填写到<input>输入框中，所以我判断应该是表单取值的时候结构有问题，经过一番试验，终于找到了正确的绑定表单的方法。

这里贴上我的修改后的table的代码：

外层就是一个formGroup，这里就只贴出table的部分——

 <nz-table #clauseTable nzSize="small" [nzData]="editClauseForm.get('purchaseFlowTempDetailVOList')['controls']"
    [nzBordered]="true" [nzTotal]="total" [(nzPageIndex)]="tableConfig.pageNum">
    <thead>
      <tr>
        <th *ngIf="!_isReadOnly">操作</th>
        <th width="10%"><i style="color: red;">* </i>审批层级</th>
        <th width="12%"><i style="color: red;">* </i>审批角色</th>
        <th width="10%">条件1</th>
        <th width="12%">金额1</th>
        <th width="10%">条件2</th>
        <th width="12%">金额2</th>
        <th width="15%">默认人员</th>
      </tr>
    </thead>
    <tbody formArrayName="purchaseFlowTempDetailVOList">
      <tr *ngFor="let item of clauseTable.data; let i = index;"
        [formGroupName]="tableConfig.pageSize * (tableConfig.pageNum - 1) + i">
        <td *ngIf="!_isReadOnly">
          <span class="operate-text" (click)="delClause(i)">删除</span>
        </td>
        <td>
          <!-- {{tableConfig.pageSize * (tableConfig.pageNum - 1) + i + 1}} -->
          <nz-form-control>
            <input nz-input [maxlength]="InputMaxLength.ApprovalLevel" formControlName="approveLevel" disabled
              *ngIf="_isReadOnly" />
            <input nz-input [maxlength]="InputMaxLength.ApprovalLevel" formControlName="approveLevel"
              *ngIf="!_isReadOnly" />
          </nz-form-control>
        </td>
        <td>
          <nz-form-control>
            <input nz-input [maxlength]="InputMaxLength.ApprovalRole" formControlName="approveRole" disabled
              *ngIf="_isReadOnly" />
            <input nz-input [maxlength]="InputMaxLength.ApprovalRole" formControlName="approveRole"
              *ngIf="!_isReadOnly" />
          </nz-form-control>
        </td>
        <td>
          <nz-form-control>
            <nz-select style="width: 100%;" formControlName="conditionOne" nzDisabled *ngIf="_isReadOnly">
              <nz-option nzValue=">" nzLabel=">"></nz-option>
              <nz-option nzValue=">=" nzLabel=">="></nz-option>
            </nz-select>
            <nz-select style="width: 100%;" nzAllowClear formControlName="conditionOne" *ngIf="!_isReadOnly">
              <nz-option nzValue=">" nzLabel=">"></nz-option>
              <nz-option nzValue=">=" nzLabel=">="></nz-option>
            </nz-select>
          </nz-form-control>
        </td>
        <td>
          <nz-form-control>
            <input nz-input [maxlength]="InputMaxLength.Price1" formControlName="amountOne" disabled
              *ngIf="_isReadOnly" />
            <input nz-input [maxlength]="InputMaxLength.Price1" formControlName="amountOne" *ngIf="!_isReadOnly" />
          </nz-form-control>
        </td>
        <td>
          <nz-form-control>
            <nz-select style="width: 100%;" formControlName="conditionTwo" nzDisabled *ngIf="_isReadOnly">
              <nz-option nzValue=">" nzLabel="<"></nz-option>
              <nz-option nzValue=">=" nzLabel="<="></nz-option>
            </nz-select>
            <nz-select style="width: 100%;" formControlName="conditionTwo" nzAllowClear *ngIf="!_isReadOnly">
              <nz-option nzValue=">" nzLabel="<"></nz-option>
              <nz-option nzValue=">=" nzLabel="<="></nz-option>
            </nz-select>
          </nz-form-control>
        </td>
        <td>
          <nz-form-control>
            <input nz-input [maxlength]="InputMaxLength.Price2" formControlName="amountTwo" disabled
              *ngIf="_isReadOnly" />
            <input nz-input [maxlength]="InputMaxLength.Price2" formControlName="amountTwo" *ngIf="!_isReadOnly" />
          </nz-form-control>
        </td>
        <!-- 选择审批人员 -->
        <td>
          <nz-form-control>
            <nz-input-group [nzAddOnAfter]="affixTpl">
              <input nz-input formControlName="defaultApproveMember" disabled *ngIf="_isReadOnly">
              <input nz-input (focus)="showSelectUser('defaultApproveMember',i)" formControlName="defaultApproveMember"
                *ngIf="!_isReadOnly">
            </nz-input-group>
            <ng-template #affixTpl *ngIf="!_isReadOnly">
              <i class="anticon anticon-close" (click)="clearFlowUser(i)"></i>
            </ng-template>
          </nz-form-control>
        </td>
      </tr>
    </tbody>
  </nz-table>

  /* 选择人员后 */
  public onUserSelect(name: string, userId: string) {
    this.showSelectUserModal = !this.showSelectUserModal;
    const purchaseFlowTempDetailVOList = this.editClauseForm.get('purchaseFlowTempDetailVOList') as FormArray;
    purchaseFlowTempDetailVOList.at(this.editIndex)['controls']['defaultApproveMember'].setValue(name);
    purchaseFlowTempDetailVOList.at(this.editIndex)['controls']['defaultApproveMemberId'].setValue(userId);
  }



ngOnInit() {
    this.editClauseForm = this.formBuilder.group({        // 外层formBuilder
      templateNo: [null, Validators.required],
      templateType: [null, [Validators.required]],
      approvalLevel: [null, Validators.required],
      clauseArr: this.formBuilder.array([ 

      ])
    });
  }

同时贴出获取整个表单信息的时候，怎么去把获取的信息传到这个表单中的formArray中：

  /* 获取页面信息 */
  public getDetail() {
    this.approvalFormService.getApprovalFlowItem(this._detailId).subscribe((resData) => {
      // 表单中除了formArray以外需要获取的字段信息      
      this.editClauseForm.patchValue({              
        approveType: resData.value.approveType, pipe: 'approveType',
        approveLevel: resData.value.approveLevel,
      });
      const purchaseFlowTempDetailVOList = this.formBuilder.array([]);    // 声明table也就是formArray
      resData.value.purchaseFlowTempDetailVOList.forEach((item) => {
        purchaseFlowTempDetailVOList.push(this.newClauseForm(item));      // 逐行获取push到formArray中
      });
      this.editClauseForm.setControl('purchaseFlowTempDetailVOList', purchaseFlowTempDetailVOList);
      this.total = resData.value.purchaseFlowTempDetailVOList.length;
    });
  }


  /* 新增一行或遍历table时 */
  public newClauseForm(data?: any) {
    const form = this.formBuilder.group({
      approveLevel: [null, [Validators.required, Validators.maxLength(this.InputMaxLength.ApprovalLevel)
        , this.ufastValidatorsService.onlyNumber()]],
      approveRole: [null, [Validators.required, Validators.maxLength(this.InputMaxLength.ApprovalRole)]],
      conditionOne: [null],
      amountOne: [null, [Validators.maxLength(this.InputMaxLength.Price1)]],
      conditionTwo: [null],
      amountTwo: [null, [Validators.maxLength(this.InputMaxLength.Price2)]],
      defaultApproveMember: [null],
      defaultApproveMemberId: [null],
    });
    if (data) {
      form.patchValue(data);
    }
    return form;
  }