Angular FormBuilder结合扩展运算符处理含数组的对象时,FormControl类型不符合预期的问题求助
Angular FormBuilder结合扩展运算符处理含数组的对象时,FormControl类型不符合预期的问题求助
大家好,我在使用Angular的FormBuilder构建表单时遇到了一个类型推断的小坑,想请教下有没有更优雅的解决方式。
先给大家看下我的代码背景:
首先我定义了一个数据接口MyDto:
export interface MyDto { id: number; name: string; active: boolean; groups: number[]; nodes: MyNode[]; }
然后我写了一个newInstance方法来返回这个接口的默认值对象,方便复用默认值逻辑:
// 创建带默认值的实例 protected override newInstance(): MyDto { return { id: 0, name: '', active: true, groups: [], nodes: [], }; }
最开始我想通过扩展运算符展开newInstance()的返回值,用FormBuilder的nonNullable.group自动生成所有对应字段的FormControl:
formGroup = new FormBuilder().nonNullable.group({ ...this.newInstance(), // 期望通过扩展默认值对象自动生成所有FormControl });
但这里出现了类型推断错误:
id、name、active的FormControl类型都符合预期(分别是FormControl<number>、FormControl<string>、FormControl<boolean>)- 但数组字段的类型完全错了:
groups被推断为FormControl<number>(应该是number[]),nodes被推断为FormControl<MyNode>(应该是MyNode[])
后来我找到了一个临时的 workaround:在group配置里手动覆盖数组字段,重新设为空数组:
formGroup = new FormBuilder().nonNullable.group({ ...this.newInstance(), // 生成基础字段 // 手动修正数组类型 groups: [], nodes: [], });
这样修改后,数组字段的FormControl类型就正确了,但我实际项目里的数组字段远不止示例里的两个,每个都手动写一遍不仅繁琐,代码看起来也乱糟糟的,实在不够优雅。
我之前还试过在newInstance里给数组显式加类型断言,比如groups: [] as number[],但试了之后没有任何变化,和我预想的一样没起作用。
所以想请教大家两个问题:
- 为什么用扩展运算符展开
newInstance()的返回值时,Angular/TypeScript没法正确识别出数组类型呢? - 有没有比手动覆盖数组字段更优雅的解决方式?
内容来源于stack exchange
相关产品推荐
相关产品推荐

