Angular Forms with table

user_15524911 0
Viewed 2142

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:

enter image description here

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:

enter image description here

angular typescript html
2 Answers

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

For table type you have to use FormArray.

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

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