html - 带表格的 Angular 形式

Question

所以我有这个需求，我想以表格的形式提交一个由五个记录组成的表单。这就是它的样子表:

这是对应的代码:

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