Home > Enterprise >  Angular Forms with table
Angular Forms with table

Time:12-22

So I have this requirement, I am trying to submit a form which consists of five records in the form of table. This is what it looks like output result

component.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']
 });
}

component.html

<form [formGroup]="FeedBack" (ngSubmit)="onSubmit()">
<table >          
    <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"  id="Section" formControlName="Section"></td>
        <td><input type="text"   id="QuestionID" formControlName="QuestionID"></td>
        <td><input type="text"  id="question" formControlName="question"></td>
        <td><input type="text"   id="Answer_ShortTxt" formControlName="Answer_ShortTxt"></td>
        <td><input type="text"   id="Answer_LongTxt" formControlName="Answer_LongTxt"></td>
        <td><input type="text"  id="Feedback" formControlName="FeedBack"></td>
    </tr>
</tbody>
</table>
<button type="submit" >Submit</button>
<pre>{{FeedBack.value | json}}</pre>
</form>
  • Related