Angular编辑测验时FormArray无法从API响应获取完整试题选项

你的问题核心在于FormArray无法通过patchValue自动适配API返回的数组长度。初始化createQuizForm时，questionList是仅包含1个空问题控件的FormArray，当你用patchValue赋值时，它只会更新现有索引的控件（也就是第一个问题），不会自动新增FormGroup来匹配API返回的2个问题。

解决方案：手动构建匹配的FormArray #

替换原来直接用patchValue赋值questionList的代码，改为手动清空原有FormArray，遍历API返回的questionList逐个创建对应的FormGroup，同时处理嵌套的optionList FormArray：

if (type == 'quiz') {
  this.showQuiz = true;
  this.showUpload = false;
  this.showDelete = false;
  this.show = false;
  this.quiz = true;

  // 清空现有questionList FormArray
  const questionArray = this.quizForm.get('questionList') as FormArray;
  questionArray.clear();

  // 遍历API返回的问题列表，逐个构建FormGroup
  questionList.forEach(question => {
    // 创建单条问题的FormGroup
    const questionGroup = this.fb.group({
      id: [question.id],
      questionText: [question.questionText, Validators.required],
      optionList: this.fb.array([]),
      timestamp: [question.timestamp]
    });

    // 处理当前问题的选项列表
    const optionArray = questionGroup.get('optionList') as FormArray;
    question.optionList.forEach(option => {
      optionArray.push(this.fb.group({
        id: [option.id],
        optionText: [option.optionText, Validators.required],
        isAnswer: [option.isAnswer.toString(), Validators.required], // 布尔值转字符串适配表单控件类型
        timestamp: [option.timestamp]
      }));
    });

    // 将问题FormGroup添加到总数组
    questionArray.push(questionGroup);
  });

  // 赋值非数组类型的表单字段
  this.quizForm.patchValue({
    id: id,
    name: name,
    order: this.position,
    type: type,
    path: null,
    quizTime: quizTime,
    quizInstruction: quizInstruction
  });

  console.log(questionList);
  console.log(this.quizForm.value.questionList);
}

原方式失效的原因 #

• patchValue对FormArray的处理逻辑是：仅更新与现有控件索引匹配的数据。如果新数据长度大于FormArray现有长度，超出部分会被忽略；如果长度更小，多余的控件会保留。
• 你初始化时questionList只有1个控件，所以API返回的第2个问题无法被加载。

额外注意事项 #

1. 确保API返回的questionList、optionList字段名与你的表单控件完全一致，避免因拼写错误导致数据无法绑定。
2. 注意isAnswer的类型转换：API返回的布尔值需要转为字符串，否则可能触发表单校验失败（表单控件默认值类型为字符串）。
3. 后续如果需要支持动态增删问题/选项，这个手动构建FormArray的逻辑可以直接复用。

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