如何在Angular中构建FormGroup以向数据库插入数组类型数据？

你需要用FormArray来处理表单中的数组字段，每个数组元素对应一个包含options、question、answer的FormGroup。下面是完整的实现方案：

1. 组件代码实现 #

首先确保你已经导入了响应式表单所需的依赖，然后构建表单结构：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-quiz-form',
  templateUrl: './quiz-form.component.html',
  styleUrls: ['./quiz-form.component.css']
})
export class QuizFormComponent implements OnInit {
  admQuizForm!: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(){ 
    this.admQuizForm = this.fb.group({ 
      name: '', 
      desc: '', 
      type: '', 
      date: new Date(), 
      // 初始化一个包含空问题的FormArray
      questions: this.fb.array([this.createQuestionFormGroup()]) 
    }); 
  }

  // 创建单个问题的FormGroup（包含options数组）
  private createQuestionFormGroup(): FormGroup {
    return this.fb.group({
      // 初始化4个空选项，匹配你的数据库结构
      options: this.fb.array(['', '', '', '']),
      question: '',
      answer: ''
    });
  }

  // 便捷获取questions FormArray（模板中会用到）
  get questionsFormArray(): FormArray {
    return this.admQuizForm.get('questions') as FormArray;
  }

  // 添加新问题
  addNewQuestion(): void {
    this.questionsFormArray.push(this.createQuestionFormGroup());
  }

  // 删除指定索引的问题
  removeQuestion(index: number): void {
    this.questionsFormArray.removeAt(index);
  }

  // 提交表单
  onSubmitQuiz(): void {
    if (this.admQuizForm.valid) {
      // 表单值的结构完全匹配你的数据库示例
      console.log('表单提交数据:', this.admQuizForm.value);
      // 这里调用服务将数据发送到后端即可
    }
  }
}

2. 模板（HTML）实现 #

在模板中绑定FormArray和嵌套的FormGroup，实现动态添加/删除问题和选项：

<form [formGroup]="admQuizForm" (ngSubmit)="onSubmitQuiz()">
  <!-- 基础信息字段 -->
  <div class="form-group">
    <label>测验名称</label>
    <input type="text" formControlName="name" class="form-control">
  </div>
  <div class="form-group">
    <label>测验描述</label>
    <textarea formControlName="desc" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <label>测验类型</label>
    <input type="text" formControlName="type" class="form-control">
  </div>
  <div class="form-group">
    <label>日期</label>
    <input type="date" formControlName="date" class="form-control">
  </div>

  <!-- 问题列表 -->
  <div formArrayName="questions" class="mt-4">
    <h4>问题列表</h4>
    <button type="button" class="btn btn-sm btn-primary mb-2" (click)="addNewQuestion()">添加新问题</button>

    <!-- 遍历每个问题 -->
    <div *ngFor="let question of questionsFormArray.controls; let i = index" 
         [formGroupName]="i" class="border p-3 mb-3">
      <div class="d-flex justify-content-between align-items-center">
        <h5>问题 {{i+1}}</h5>
        <button type="button" class="btn btn-sm btn-danger" (click)="removeQuestion(i)">删除</button>
      </div>

      <div class="form-group mt-2">
        <label>问题内容</label>
        <input type="text" formControlName="question" class="form-control">
      </div>
      <div class="form-group">
        <label>正确答案</label>
        <input type="text" formControlName="answer" class="form-control">
      </div>

      <!-- 选项列表 -->
      <div formArrayName="options" class="mt-3">
        <h6>选项</h6>
        <div *ngFor="let option of question.get('options')['controls']; let j = index" 
             class="form-group">
          <input type="text" [formControlName]="j" class="form-control" placeholder="选项 {{j+1}}">
        </div>
      </div>
    </div>
  </div>

  <button type="submit" class="btn btn-success mt-3">提交测验</button>
</form>

3. 额外补充：加载已有数据到表单（编辑场景） #

如果需要从数据库加载已有的测验数据到表单中，可以添加以下方法：

loadExistingQuiz(quizData: any): void {
  // 填充基础字段
  this.admQuizForm.patchValue({
    name: quizData.name,
    desc: quizData.desc,
    type: quizData.type,
    date: quizData.date ? new Date(quizData.date) : new Date()
  });

  // 清空现有问题，重新加载数据库中的问题
  const questionsArray = this.questionsFormArray;
  questionsArray.clear();
  
  quizData.questions.forEach((q: any) => {
    const questionGroup = this.fb.group({
      question: q.question,
      answer: q.answer,
      options: this.fb.array(q.options) // 直接用数据库的选项数组初始化
    });
    questionsArray.push(questionGroup);
  });
}

这样处理后，表单提交的value结构会和你提供的数据库示例完全一致，无需额外转换即可直接传给后端。

内容的提问来源于stack exchange，提问作者artyom