Angular FormArray中app-input组件值为undefined问题求助

问题现象 #

使用Angular FormArray时，app-input组件无法显示任何值，打印控件值均为undefined；但将普通FormGroup控件传入app-input时能正常显示值。

核心问题与修复方案 #

1. 错误操作FormArray的controls数组 #

直接通过自定义getter返回的mtTypeControls数组调用push()，属于直接操作控件数组，不符合Angular表单规范，会导致新添加的FormGroup未正确关联到FormArray，无法同步值和状态。

修复方法：获取FormArray实例并调用其push()方法添加控件：

private createForm(data: MaintenanceType[]) {
  // 创建与外层非空表单匹配的分组
  const mtTypesGroup = this.fb.nonNullable.group({
    nameEn: '123',
    nameRu: '333',
    analyzer: '333',
  }) as FormGroup<mtTypesForm>;
  
  // 正确获取FormArray并添加控件
  const mtTypesArray = this.form.controls.mtTypes as FormArray;
  mtTypesArray.push(mtTypesGroup);
}

2. NonNullable表单与普通FormControl类型不兼容 #

外层表单使用fb.nonNullable.group创建非空表单，但createForm中用new FormControl()创建了可空控件，类型不匹配导致值无法正确绑定到组件。

修复方法：统一使用fb.nonNullable系列方法创建控件，保持类型一致。

3. 优化模板绑定逻辑 #

模板中可直接遍历FormArray的controls，避免自定义getter可能带来的类型转换问题，同时用get()方法获取控件更安全：

@for (group of form.controls.mtTypes.controls; track group) {
  <div class="row margin-top-hg" (click)="test(form.controls.mtTypes.controls)">
    <app-input label="Name (ENG)" [formControl]="group.get('nameEn')!"></app-input>
    <app-input label="Name (RUS)" [formControl]="group.get('nameRu')!"></app-input>
  </div>
}

注：!是非空断言，确保目标控件存在；若不确定控件是否存在，可添加空值判断。

4. 清理重复初始化逻辑（可选） #

当前ngOnInit中先初始化了带默认分组的FormArray，后续createForm又添加新分组，若不需要默认分组，可简化初始化代码：

ngOnInit(): void {
  this.form = this.fb.nonNullable.group({
    mtTypes: this.fb.array([] as FormGroup<mtTypesForm>[]),
  });
  this.createForm([]);
}

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