在Angular响应式表单中使用FormArray高效管理动态数据

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder } from '@angular/forms'; // 导入必要的模块
import { Quiz1Service } from 'src/app/services/quiz1.service';
import { Quiz1 } from 'src/app/models/quiz1.model';

@Component({
  selector: 'app-quiz1',
  templateUrl: './quiz1.component.html',
  styleUrls: ['./quiz1.component.css']
})
export class Quiz1Component implements OnInit {

  questions?: Quiz1[];
  quizForm!: FormGroup; // 声明 FormGroup 实例
  score = 0;
  submittedAnswers: String[] = []; // 用于存储提交的答案数组

  constructor(
    private quiz1Service: Quiz1Service,
    private fb: FormBuilder // 注入 FormBuilder
  ) { }

  ngOnInit(): void {
    // 使用 FormBuilder 初始化 quizForm，其中 'answers' 是一个 FormArray
    this.quizForm = this.fb.group({
      answers: this.fb.array([])
    });
    this.retrieveQuestions();
  }

  // Getter 方法，方便访问 FormArray
  get answers(): FormArray {
    return this.quizForm.get('answers') as FormArray;
  }

  retrieveQuestions(): void {
    this.quiz1Service.getAll()
      .subscribe({
        next: (data: any) => {
          this.questions = data;
          console.log(data);
          // 根据获取到的问题数量，动态地向 FormArray 添加 FormControl
          this.questions?.forEach(() => {
            this.answers.push(this.fb.control('')); // 为每个问题添加一个空的 FormControl
          });
        },
        error: (e: any) => console.error(e)
      });
  }

  onSubmit(): void {
    if (this.quizForm.valid) {
      // 直接从 FormArray 的值中获取答案数组
      this.submittedAnswers = this.answers.value;
      console.log('提交的答案:', this.submittedAnswers);
      this.calculateScore();
    }
  }

  calculateScore(): void {
    this.score = 0; // 重置分数
    if (this.questions && this.submittedAnswers.length === this.questions.length) {
      this.questions.forEach((question, index) => {
        // 比较正确答案与用户提交的答案
        if (question.answer === this.submittedAnswers[index]) {
          this.score++;
        }
      });
    }
    console.log('最终得分:', this.score);
  }
}

<div class="container">
  <!-- 将表单绑定到 quizForm，并调用 onSubmit 方法 -->
  <form [formGroup]="quizForm" (ngSubmit)="onSubmit()">

    <!-- 使用 formArrayName 绑定到 answers FormArray -->
    <div formArrayName="answers">
      <!-- 遍历问题列表，let i = index 获取当前元素的索引 -->
      <div *ngFor="let question of questions; let i = index">
        <div class="form-group">
          <a>{{question.questionId}}. {{question.question}}</a><br>

          <!-- 每个单选按钮组绑定到 FormArray 中对应索引的 FormControl -->
          <!-- 注意：所有属于同一问题的单选按钮必须共享相同的 [formControlName] -->
          <input type="radio" [formControlName]="i" value="A">
          <label>A. {{question.optionsA}}</label><br>

          <input type="radio" [formControlName]="i" value="B">
          <label>B. {{question.optionsB}}</label><br>

          <input type="radio" [formControlName]="i" value="C">
          <label>C. {{question.optionsC}}</label><br>

          <input type="radio" [formControlName]="i" value="D">
          <label>D. {{question.optionsD}}</label><br>
        </div>
      </div>
    </div>

    <button class="btn btn-primary" type="submit" [disabled]="!quizForm.valid">提交</button>
  </form>

  <!-- 结果展示区域 -->
  <div *ngIf="submittedAnswers.length > 0">
    <h3>结果</h3>
    <table>
      <thead>
        <tr>
          <th>问题编号</th>
          <th>正确答案</th>
          <th>你的答案</th>
          <th>是否正确</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let question of questions; let i = index">
          <td>{{question.questionId}}</td>
          <td>{{question.answer}}</td>
          <td>{{submittedAnswers[i]}}</td>
          <td>{{question.answer === submittedAnswers[i] ? '是' : '否'}}</td>
        </tr>
      </tbody>
    </table>
    <p>总分: {{score}} / {{questions?.length}}</p>
  </div>
</div>