Angular中高效处理动态表单数据：使用FormArray存储用户答案

<Form #a ="ngForm" ngForm (ngSubmit)="onSubmit(a)">
  <div *ngFor="let question of questions">
    <div class = "form-group">
      <a>{{question.questionId}}. {{question.question}}</a><br>
      <input type="radio" ngModel name="Ans{{question.questionId}}" value="A" >
      <label for="html">A. {{question.optionsA}}</label><br>
      <!-- ...其他选项... -->
    </div>
  </div>
  <button type="submit">Submit</button>
</Form>

// onSubmit 方法的原始实现
onSubmit(a:NgForm){
  this.results?.push(a.value); // 结果：results = [{Ans1: 'A', Ans2: 'C'}]
  console.log(this.results);
  // ...后续评分逻辑...
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 导入 ReactiveFormsModule
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { Quiz1Component } from './quiz1/quiz1.component';

@NgModule({
  declarations: [
    AppComponent,
    Quiz1Component
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // 添加到 imports 数组
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { Quiz1 } from 'src/app/models/quiz1.model';
import { Quiz1Service } from 'src/app/services/quiz1.service';
import { FormBuilder, FormGroup, FormArray, FormControl, Validators } from '@angular/forms'; // 导入响应式表单相关模块

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

  questions?: Quiz1[];
  quizForm!: FormGroup; // 定义 FormGroup 实例
  score = 0;
  results: String[] = []; // 用于存储用户提交的答案，现在将是一个String数组

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

  ngOnInit(): void {
    this.retrieveQuestions();
    // 初始化表单，包含一个空的 answers FormArray
    this.quizForm = this.fb.group({
      answers: this.fb.array([])
    });
  }

  // 获取 answers FormArray 的便捷方法
  get answersFormArray(): FormArray {
    return this.quizForm.get('answers') as FormArray;
  }

  retrieveQuestions(): void {
    this.quiz1Service.getAll()
      .subscribe({
        next: (data: any) => {
          this.questions = data;
          console.log('Fetched questions:', this.questions);
          // 为每个问题动态添加一个 FormControl 到 answers FormArray
          this.questions?.forEach(() => {
            this.answersFormArray.push(this.fb.control('', Validators.required)); // 每个答案都是一个 FormControl，初始值为空，并添加了验证器
          });
        },
        error: (e: any) => console.error('Error fetching questions:', e)
      });
  }

  onSubmit(): void { // onSubmit 方法不再接收 NgForm 参数
    if (this.quizForm.valid) { // 检查表单是否有效
      this.results = this.answersFormArray.value; // 直接获取 FormArray 的值，这将是一个答案字符串数组
      console.log('Submitted answers:', this.results);

      this.score = 0; // 重置分数
      this.questions?.forEach((question, index) => {
        // 确保索引匹配，并进行答案比对
        if (this.results[index] === question.answer) {
          this.score++;
        }
      });
      console.log('Your score:', this.score);

      // 如果需要显示用户答案和正确答案的对比，可以在这里构建数据结构
      // 例如：
      // this.displayResults = this.questions?.map((q, i) => ({
      //   questionId: q.questionId,
      //   correctAnswer: q.answer,
      //   yourAnswer: this.results[i]
      // }));

    } else {
      console.log('Form is invalid. Please answer all questions.');
      // 可以添加逻辑来标记未回答的问题
      this.quizForm.markAllAsTouched(); // 标记所有控件为“已触摸”以显示验证错误
    }
  }
}

<div class="container">
  <!-- 将 ngForm 替换为 [formGroup] 和 (ngSubmit) -->
  <form [formGroup]="quizForm" (ngSubmit)="onSubmit()">

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

        <!-- 每个单选按钮组绑定到 FormArray 中对应索引的 FormControl -->
        <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 *ngIf="answersFormArray.controls[i]?.invalid && answersFormArray.controls[i]?.touched" class="text-danger">
          请选择一个答案。
        </div>
      </div>
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>
  </form>

  <!-- 结果显示区域，现在可以根据 results 数组和 questions 数组进行更精确的展示 -->
  <div *ngIf="results.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>{{results[i]}}</td>
          <td [ngClass]="{'text-success': results[i] === question.answer, 'text-danger': results[i] !== question.answer}">
            {{results[i] === question.answer ? '正确' : '错误'}}
          </td>
        </tr>
      </tbody>
    </table>
    <p>总得分: {{score}} / {{questions?.length}}</p>
  </div>
</div>