拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 带表格的角表格

带表格的角表格

白鹭 - 2022-03-25 2147 0 0

所以我有这个要求,我试图提交一个由表格形式的五条记录组成的表格。这是它看起来像 带表格的角表格

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>
标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *