所以我有這個要求，我試圖提交一個由表格形式的五條記錄組成的表格。這是它看起來像
uj5u.com熱心網友回復：
我們可以使用處理這些型別的表單 FormArray
作業
組件.ts
this.FeedBack= this.formBuilder.group({
Rows: this.formBuilder.array([this.initRows()])
});
initRows() {
return this.formBuilder.group({
Section : ['1'],
QuestionID:['1'],
question:['test'],
Answer_ShortTxt:['test'],
Answer_LongTxt:['test'],
FeedBack:['test']
});
}
組件.html
<form [formGroup]="FeedBack" (ngSubmit)="onSubmit()">
<table class="form-group">
<tr>
<th> Section </th>
<th> Q.No </th>
<th> Question Description </th>
<th> Answer_ShortTxt. </th>
<th> Answer_longTxt. </th>
<th> Comments </th>
</tr>
<tbody formArrayName="Rows">
<tr *ngFor="let obj of FeedBack.controls.Rows.controls; let i=index;let l=last" [formGroupName]="i">
<td ><input type="textarea" class="form-control" id="Section" formControlName="Section"></td>
<td><input type="text" class="form-control" id="QuestionID" formControlName="QuestionID"></td>
<td><input type="text" class="form-control" id="question" formControlName="question"></td>
<td><input type="text" class="form-control" id="Answer_ShortTxt" formControlName="Answer_ShortTxt"></td>
<td><input type="text" class="form-control" id="Answer_LongTxt" formControlName="Answer_LongTxt"></td>
<td><input type="text" class="form-control" id="Feedback" formControlName="FeedBack"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary">Submit</button>
<pre>{{FeedBack.value | json}}</pre>
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390670.html