Angular Forms with table

Issue

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:

Solution

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>

Answered By - Sivakumar Tadisetti