Angular 2中遍历嵌套FormArray的技术实现问询

看起来你已经搭建好了基础的表单结构，接下来我们一步步解决嵌套FormArray的遍历问题，分为组件逻辑优化和模板渲染两部分来实现：

一、组件内添加便捷的Getter/辅助方法 #

首先，为了避免在模板里写冗长的表达式，我们可以给外层的groups FormArray和内层的questions（甚至answers）添加Getter或辅助方法，方便快速获取对应的表单控件：

// 获取外层的groups FormArray
get groups(): FormArray {
  return this.reactiveForm.get('groups') as FormArray;
}

// 根据分组索引获取该组下的questions FormArray
getQuestions(groupIndex: number): FormArray {
  return this.groups.at(groupIndex).get('questions') as FormArray;
}

// 如果需要遍历Answers，再添加这个方法
getAnswers(groupIndex: number, questionIndex: number): FormArray {
  return this.getQuestions(groupIndex).at(questionIndex).get('answers') as FormArray;
}

另外，补充下你getGroups方法的完整实现（假设你的Survey结构里，每个group包含一组questions）：

getGroups(): AbstractControl[] {
  // 遍历后端/模拟数据里的groups，生成对应的FormGroup
  return this.survey.groups.map(group => {
    return this.fb.group({
      // 如果group有自身的属性（比如分组名称），可以在这里添加对应的FormControl
      // groupName: [group.name],
      questions: this.fb.array(this.generateQuestionControls(group.questions))
    });
  });
}

// 为单个分组下的所有question生成FormControl（或包含answers的FormGroup）
private generateQuestionControls(questions: Question[]): AbstractControl[] {
  return questions.map(question => {
    // 如果每个question只需要一个答案输入框，直接用FormControl
    return this.fb.control('', Validators.required);

    // 如果每个question包含多个answers（比如多选、子问题），则用FormGroup嵌套FormArray
    // return this.fb.group({
    //   questionText: [question.text],
    //   answers: this.fb.array(question.answers.map(ans => this.fb.control('')))
    // });
  });
}

二、模板中嵌套遍历FormArray #

接下来在模板里通过formArrayName、formGroupName和*ngFor来实现多层遍历，确保表单控件和数据正确绑定：

<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()">
  <!-- 基础的name输入框 -->
  <div>
    <label>姓名：</label>
    <input formControlName="name" placeholder="请输入姓名">
    <!-- 验证提示 -->
    <span *ngIf="reactiveForm.get('name')?.invalid && reactiveForm.get('name')?.touched">姓名为必填项</span>
  </div>

  <!-- 遍历外层Groups -->
  <div formArrayName="groups">
    <div *ngFor="let groupCtrl of groups.controls; let groupIndex = index" [formGroupName]="groupIndex">
      <h3>{{ survey.groups[groupIndex].name }}（分组{{ groupIndex + 1 }}）</h3>

      <!-- 遍历当前分组下的Questions -->
      <div formArrayName="questions">
        <div *ngFor="let questionCtrl of getQuestions(groupIndex).controls; let questionIndex = index">
          <!-- 如果question是单个FormControl -->
          <div>
            <label>{{ survey.groups[groupIndex].questions[questionIndex].text }}：</label>
            <input [formControl]="questionCtrl">
          </div>

          <!-- 如果question是包含answers的FormGroup，需要再嵌套遍历 -->
          <!-- <div [formGroupName]="questionIndex">
            <label>{{ survey.groups[groupIndex].questions[questionIndex].text }}：</label>
            <div formArrayName="answers">
              <div *ngFor="let ansCtrl of getAnswers(groupIndex, questionIndex).controls; let ansIndex = index">
                <input [formControl]="ansCtrl" placeholder="选项{{ ansIndex + 1 }}">
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>

  <button type="submit" [disabled]="reactiveForm.invalid">提交问卷</button>
</form>

关键注意点 #

• 必须通过formArrayName和formGroupName来声明当前层级的表单结构，Angular才能正确关联FormArray和DOM元素
• 遍历FormArray时，要遍历其controls属性（groups.controls、getQuestions(groupIndex).controls），而不是直接遍历数据源
• 如果需要动态添加/删除分组、问题或答案，可以在组件里调用FormArray的push()、removeAt()等方法，模板会自动同步更新

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