如何在调用POST API提交前获取响应式表单FormArray的值并在DIV中展示预览

没问题，我来帮你搞定这个需求——既要展示FormArray的预览内容，又要把数据提交到后端。咱们一步步来：

首先先修正你现有代码里的一个小问题：所有隐藏域的formControlname是小写的n，Angular的表单指令要求驼峰式的formControlName（大写N），这个得改，不然控件绑定会失效。

1. 实现FormArray内容预览 #

在你现有模板的下方，添加一个预览区域，直接通过mcqs().value获取FormArray的所有表单值，循环展示每个问题和答案即可：

<!-- 预览区域 -->
<div class="mt-4">
  <h3>预览内容</h3>
  <div class="preview-box p-3 border rounded" *ngFor="let item of mcqs().value; let i = index">
    <div class="mb-2">
      <strong>问题 {{i+1}}:</strong> {{item.question}}
    </div>
    <div>
      <strong>答案 {{i+1}}:</strong> {{item.answer}}
    </div>
    <hr *ngIf="i !== mcqs().value.length - 1">
  </div>
</div>

这里mcqs().value会返回FormArray中所有控件的键值对数组，直接用*ngFor遍历就能拿到每一项的question和answer字段，轻松展示预览内容。

2. 提交数据到后端API #

首先确保你的组件已经注入了HttpClient服务，然后编写提交逻辑：

组件代码（TypeScript）

import { Component } from '@angular/core';
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-mcq-editor',
  templateUrl: './mcq-editor.component.html',
  styleUrls: ['./mcq-editor.component.css']
})
export class McqEditorComponent {
  quizForm: FormGroup;

  constructor(private fb: FormBuilder, private http: HttpClient) {
    // 初始化表单，包含mcqs FormArray
    this.quizForm = this.fb.group({
      mcqs: this.fb.array([])
    });
  }

  // 获取mcqs FormArray的getter（和你现有代码对应）
  get mcqs(): FormArray {
    return this.quizForm.get('mcqs') as FormArray;
  }

  // 提交表单数据到后端
  submitMcqs(): void {
    // 获取FormArray的完整数据（包含question、answer、question_type等字段）
    const mcqData = this.mcqs.value;

    // 替换成你的后端API地址
    this.http.post('https://your-backend-api.com/submit-mcqs', mcqData)
      .subscribe({
        next: (response) => {
          console.log('提交成功:', response);
          // 提交成功后的操作：比如重置表单、显示成功提示
          alert('数据提交成功！');
          this.mcqs.clear();
        },
        error: (error) => {
          console.error('提交失败:', error);
          // 处理错误：比如显示错误提示
          alert('提交失败，请稍后重试！');
        }
      });
  }
}

模板中添加提交按钮

在预览区域下方加一个提交按钮，绑定点击事件：

<button class="mt-4 btn btn-primary" (click)="submitMcqs()" [disabled]="mcqs.invalid">提交数据</button>

这里的[disabled]="mcqs.invalid"可以防止表单无效时提交，你也可以根据需求给FormArray的控件添加验证规则（比如必填项）。

完整整合后的模板代码 #

<!-- 现有FormArray编辑区域 -->
<div class="row" *ngFor="let mcq of mcqs.controls; let i = index;" [formGroupName]="i" > 
  <div class="col-lg-6"> 
    <mat-form-field appearance="outline" floatLabel="always" class="w-100-p"> 
      <mat-label>Question</mat-label> 
      <textarea matInput formControlName="question"> 
      </textarea> 
    </mat-form-field> 
  </div> 
  <div class="col-lg-6"> 
    <mat-form-field appearance="outline" floatLabel="always" class="w-100-p"> 
      <mat-label>Answer</mat-label> 
      <textarea matInput formControlName="answer"> 
      </textarea> 
    </mat-form-field> 
    <input type="hidden" formControlName="question_type" /> 
    <input type="hidden" formControlName="_questionId" /> 
  </div>
</div>

<!-- 预览区域 -->
<div class="mt-4">
  <h3>预览内容</h3>
  <div class="preview-box p-3 border rounded" *ngFor="let item of mcqs.value; let i = index">
    <div class="mb-2">
      <strong>问题 {{i+1}}:</strong> {{item.question}}
    </div>
    <div>
      <strong>答案 {{i+1}}:</strong> {{item.answer}}
    </div>
    <hr *ngIf="i !== mcqs.value.length - 1">
  </div>
</div>

<!-- 提交按钮 -->
<button class="mt-4 btn btn-primary" (click)="submitMcqs()" [disabled]="mcqs.invalid">提交数据</button>

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