Angular动态表单问题求助：API问卷渲染异常及取值失败

你遇到的单选按钮不互斥、表单值为空以及TypeError报错，都是因为FormArray与模板的绑定逻辑不匹配导致的，我来一步步帮你修正：

1. 核心错误拆解 #

• TypeError报错原因：模板里用[formGroupName]="q.id"绑定分组，但FormArray的元素是按数字索引排序的，并非以question的id作为键。Angular尝试把字符串question1当作FormArray索引，自然会抛出无法在字符串上创建属性的错误。
• 单选按钮不互斥：每个单选按钮绑定了不同的formControlName（answer.id），它们属于独立的表单控件，所以会像复选框一样允许多选。
• 表单值为null：初始化FormArray时没有给questionId赋值，加上单选按钮的控件绑定错误，导致表单无法正确收集选中值。

2. 组件代码修正 #

先调整表单初始化逻辑，给每个FormGroup传入对应的questionId：

constructor(private fb: FormBuilder) { 
  this.questionsAnswersForm = this.fb.group({ 
    answers: this.fb.array([]) 
  }); 
}

// 建议在ngOnInit里调用初始化方法
ngOnInit(): void {
  this.initFormWithQAs();
}

initFormWithQAs(): void {
  const answersArray = this.questionsAnswersForm.get('answers') as FormArray;
  // 先清空数组避免重复添加
  answersArray.clear();
  this.questions.forEach(question => {
    // 把当前question的id传入FormGroup
    answersArray.push(this.addQuestionFormGroup(question.id));
  });
}

addQuestionFormGroup(questionId: string): FormGroup {
  return this.fb.group({
    questionId: [questionId, Validators.required], // 直接赋值questionId
    answerId: [null, Validators.required]
  });
}

3. 模板代码修正 #

调整模板循环逻辑，用index匹配FormArray的数字索引，同时将同一问题的单选按钮绑定到同一个answerId控件：

<!-- 外层容器绑定formArrayName -->
<div [formGroup]="questionsAnswersForm">
  <div formArrayName="answers" *ngFor="let q of questions; let i = index">
    <h5>{{ q.text }}</h5>
    <!-- 使用循环index作为formGroupName，匹配FormArray的数字索引 -->
    <div [formGroupName]="i" class="qa-list">
      <!-- 所有单选按钮绑定到同一个formControlName: answerId，实现互斥 -->
      <label *ngFor="let answer of q.answers">
        <input type="radio" [value]="answer.id" formControlName="answerId" />
        <span>{{ answer.text }}</span>
      </label>
    </div>
  </div>
</div>

4. 验证效果 #

现在测试会发现：

• 同一问题的单选按钮变为互斥状态，只能选中一个选项
• 提交表单时，questionsAnswersForm.value会输出正确的结构：

  {
    "answers": [
      {
        "questionId": "question1",
        "answerId": "answer2" // 选中的答案id
      }
    ]
  }
  

• 之前的TypeError报错也会消失

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