带表格的角形表格

Question

所以我有这个要求，我正在尝试以表格的形式提交一个由五条记录组成的表格。这就是它的样子 table

这是对应的代码：

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

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()
    })
   }

我无法捕捉输入字段的默认值，它提交为 null 并且单击提交时，所有五条记录都应该被控制台记录，但我只能获得第一条。 结果/输出：

Answer 1

我们可以使用FormArray处理这些类型的表单

工作Stackblitz

组件：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);
  }
}

组件：模板

<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

对于表格类型，您必须使用 FormArray。

这是完整的Stackblitz example 你也可以看到输出。

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>