Angular Forms with table

Question

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 table:

This is the corresponding code:

<form [formGroup]="FeedBack" (ngSubmit)="ADDFeedback()">
  <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>
      <tr *ngFor="let obj of QuestionsForSubmittedAnswersArray">
        <td>
          <input
            type="textarea"
            placeholder="{{obj.Section}}"
            [value]="obj.Section"
            class="form-control"
            id="Section"
            formControlName="Section"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.QuestionIDId}}"
            [value]="obj.QuestionIDId"
            class="form-control"
            id="QuestionID"
            formControlName="QuestionID"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.question}}"
            [value]="obj.question"
            class="form-control"
            id="question"
            formControlName="question"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.Answer_ShortTxt}}"
            [value]="obj.Answer_ShortTxt"
            class="form-control"
            id="Answer_ShortTxt"
            formControlName="Answer_ShortTxt"
          />
        </td>
        <td>
          <input
            type="text"
            placeholder="{{obj.Answer_LongTxt}}"
            [value]="obj.Answer_LongTxt"
            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>
</form>

.ts file

import { ThisReceiver } from '@angular/compiler';
import { FormBuilder,FormGroup,Validators,FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core';
import { SharepointserviceService } from 'src/Service/sharepointservice.service';
// import { resolve } from 'dns';
// import { SharepointserviceService } from 'src/Service/sharepointservice.service';
@Component({
  selector: 'app-business-buendorsement-form',
  templateUrl: './business-buendorsement-form.component.html',
  styleUrls: ['./business-buendorsement-form.component.css']
})
export class BusinessBUEndorsementFormComponent implements OnInit {
  // private service:SharepointserviceService
  SubmittedAnswers:any[]=[];
  QuestionsAndAnswers:any[]=[];
  QuestionsForSubmittedAnswersArray:any[]=[];
  FeedBack!:FormGroup;

  constructor(private service:SharepointserviceService,private fb:FormBuilder) {
    this.FeedBack=fb.group({
      Section:new FormControl(),
      QuestionID:new FormControl(),
      question:new FormControl(),
      Answer_ShortTxt:new FormControl(),
      Answer_LongTxt:new FormControl(),
      FeedBack:new FormControl()
    })
    }

I am not able to catch the default value of the input fields and it submits as null and also on clicking on submit all the five records should be console logged but I am able to get only the first. result/output:

Answer 1

We can handle these type of forms using FormArray

Working Stackblitz

Component:TS

export class AppComponent implements OnInit {
  tableForm: FormGroup;

  rowsCount: number = 3;
  get QuestionsAndAnswers() {
    return this.tableForm.get('QuestionsAndAnswers') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.tableForm = this.fb.group({
      rows: this.fb.array([]),
    });

    for (let i = 0; i < this.rowsCount; i++) {
      this.QuestionsAndAnswers.push(
        this.fb.group({
          Section: new FormControl(),
          QuestionID: new FormControl(),
          question: new FormControl(),
          Answer_ShortTxt: new FormControl(),
          Answer_LongTxt: new FormControl(),
          FeedBack: new FormControl(),
        })
      );
    }
  }

  ADDFeedback() {
    console.log(this.tableForm.value);
  }
}

Component:Template

<form [formGroup]="tableForm" (ngSubmit)="ADDFeedback()">
  <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>
      <ng-container formArrayName="QuestionsAndAnswers">
        <ng-container
          *ngFor="
            let questionAndAnswer of QuestionsAndAnswers.controls;
            let i = index
          "
        >
          <tr [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>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 2

For table type you have to use FormArray.

Here is the full Stackblitz example you can see the output aswell.

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 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>