Angular 12响应式表单问题：选中的FormGroup对应FormArray为空

使用Angular 12响应式表单时，点击选中的FormGroup后，发现其内部的FormArray本该包含数据，但实际为空。相关代码如下：

HTML代码 #

<div  *ngFor="let analysis of analysisFormArray.controls; let i = index" [class.selected]="analysis === selectedAnalysis">
  <div  [formGroup]="analysis" (click)="onSelect(analysis)">
    <div class="d-flex">
      <div>
        <div class="mail-title" fxShow="false" fxShow.gt-xs style="min-width: 120px;">
          <span>{{analysis.value.analysisName}}</span>
        </div>
        <div class="text-ellipsis">
          <span class="text-muted">Analiz açıklaması</span>
        </div>
        <div class="pl-1 text-xs-right text-ellipsis hide-on-open" fxShow="false" fxShow.gt-sm>
          <small class="text-muted">Tarih</small>
        </div>
      </div>
    </div>
  </div>
</div>

TypeScript代码 #

onSelect(analysis: FormGroup): void {
  console.log("Analysis",this.analysisFormArray);
  console.log("Select Analysis",analysis);
  this.selectedAnalysis = analysis;
}

排查与解决建议 #

1. 检查FormGroup初始化逻辑 #

确保创建包含FormArray的FormGroup时，正确初始化了FormArray并填充数据。示例初始化代码：

constructor(private fb: FormBuilder) {}

// 创建单个分析项的FormGroup
createAnalysisFormGroup(): FormGroup {
  return this.fb.group({
    analysisName: [''],
    // 这里要确保FormArray被正确初始化并赋值
    subAnalyses: this.fb.array(this.getInitialSubAnalyses())
  });
}

// 生成FormArray的初始数据
getInitialSubAnalyses(): FormGroup[] {
  // 根据实际业务返回填充好数据的FormGroup数组
  return [
    this.fb.group({ itemName: '示例1', value: 10 }),
    this.fb.group({ itemName: '示例2', value: 20 })
  ];
}

2. 修正控制台输出方式 #

直接打印FormGroup对象可能无法展示内部控件的真实数据，修改onSelect方法中的打印语句：

onSelect(analysis: FormGroup): void {
  console.log("选中的表单值：", analysis.value); // 打印value而非FormGroup对象
  this.selectedAnalysis = analysis;
}

通过查看analysis.value可以明确看到FormArray是否真的为空。

3. 确认模板中FormArray的绑定（若需展示） #

如果需要在模板中渲染选中FormGroup内的FormArray，要确保绑定正确：

<!-- 假设选中的FormGroup内的FormArray名为subAnalyses -->
<div *ngIf="selectedAnalysis" formArrayName="subAnalyses">
  <div *ngFor="let subItem of selectedAnalysis.get('subAnalyses').controls; let i=index" [formGroupName]="i">
    <input formControlName="itemName" placeholder="子项名称">
    <input formControlName="value" type="number" placeholder="数值">
  </div>
</div>

4. 避免表单引用失效 #

如果是从后端获取数据后更新表单，需使用patchValue或setValue方法更新FormArray，而非直接替换整个数组。示例：

// 假设从后端获取到subAnalysesData数组
updateSubAnalyses(subAnalysesData: any[]) {
  const subAnalysesArray = this.selectedAnalysis.get('subAnalyses') as FormArray;
  // 清空原有数据
  while (subAnalysesArray.length) {
    subAnalysesArray.removeAt(0);
  }
  // 添加新数据
  subAnalysesData.forEach(data => {
    subAnalysesArray.push(this.fb.group(data));
  });
}

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