今天做的項目中做了一個新增頁面，其中最頂級是一個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;
}