Angular中FormArray调用setValue时报value.forEach不是函数错误

错误原因 #

调用setValue时，你给titleList传入了FormArray实例，但setValue要求传入的是表单对应的原始数据值（比如普通数组），而非表单控件实例。Angular尝试对这个FormArray实例执行数组的forEach方法，因此触发报错。

解决方案 #

1. 修改mock数据为原始值类型 #

将mock中的titleList从new FormArray([])改为普通数组：

const mock = { 
  title: {
    titleList: [], // 空数组，对应空的FormArray
    name: 'Movie one',
    // 其他表单元素...
  }
};

formService.get().setValue(mock);

如果需要给titleList设置初始项，根据实际表单项结构传入对应原始值数组即可。比如每个titleList项是带itemName字段的表单组，就传：

const mock = { 
  title: {
    titleList: [{ itemName: 'First Item' }, { itemName: 'Second Item' }],
    name: 'Movie one',
    // 其他表单元素...
  }
};

2. 测试中动态添加FormArray项（可选） #

如果需要模拟点击“新增名称”后的状态，可以先通过setValue设置基础值，再获取FormArray实例手动添加控件：

// 先设置基础表单值
formService.get().setValue({
  title: {
    titleList: [],
    name: 'Movie one',
    // 其他表单元素...
  }
});

// 获取titleList对应的FormArray
const titleListArray = formService.get().get('title.titleList') as FormArray;
// 根据实际表单结构添加项，比如添加一个表单控件或表单组
titleListArray.push(this.fb.control('New Added Title'));

内容的提问来源于stack exchange，提问作者sebi.schneider