Angular执行ng test报错：FormGroup无法赋值给FormArray的解决方法

嘿，这个错误其实是Angular表单类型不匹配的典型问题！核心原因很简单：FormGroup和FormArray的controls属性结构完全不同——FormGroup的controls是键值对类型（{ [key: string]: AbstractControl }），而FormArray的controls是数组类型（AbstractControl[]），TypeScript的类型检查自然会拦住这种不兼容的赋值操作。

结合你贴的测试代码，我帮你梳理问题和解决步骤：

1. 检查组件内部的类型声明 #

问题大概率出在StepAvailabilityComponent的源码里：你可能把operatingDays控件的类型错误声明成了FormGroup，或者在从fg中获取它时用错了类型断言。

打开组件文件，找到类似这样的错误代码：

// 错误示例1：直接声明错误类型
operatingDays: FormGroup;

// 错误示例2：从FormGroup获取时断言错误类型
get operatingDays() {
  return this.fg.get('operatingDays') as FormGroup;
}

把它修正为FormArray类型即可：

// 正确的直接声明
operatingDays: FormArray;

// 正确的类型断言
get operatingDays() {
  return this.fg.get('operatingDays') as FormArray;
}

2. 确认测试代码的赋值逻辑没问题 #

你的测试代码里已经正确给fg.operatingDays赋值了FormArray实例：

component.fg = new FormGroup({
  operatingDays: new FormArray(
    [
      new FormGroup({ 
        enabled: new FormControl(false), 
        localName: new FormControl('mandag'), 
      }),
    ]
  )
});

这部分逻辑是对的，不需要修改，只要组件内部的类型和这个实例匹配就行。

3. 顺带检查模板的用法 #

如果你的组件模板里有遍历operatingDays.controls的代码（比如用*ngFor），要确保是把它当作数组处理：

<!-- 正确用法：FormArray的controls是数组，直接用ngFor遍历 -->
<div *ngFor="let dayCtrl of operatingDays.controls">
  <!-- 可以通过dayCtrl.value获取表单控件的值 -->
</div>

要是之前你把它当作FormGroup用keyvalue管道遍历，就得跟着改成数组的用法。

总结 #

这个错误就是TypeScript在帮你把关：你把结构完全不同的表单控件类型搞混了。只要把组件里operatingDays的类型改成FormArray，和测试代码里的实例对齐，ng test的这个错误就会消失啦！

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