Angular中formGroups数组的setValue()使整个formArray值均为最后一个对象

嘿，这个问题我之前也踩过坑！核心原因其实是你多次把同一个FormGroup实例（也就是this.objform）添加到了数组里，这是JavaScript引用类型特性导致的，不算操作失误，但确实是容易忽略的细节。

为什么会出现重复？ #

在JavaScript里，对象（包括Angular的FormGroup）属于引用类型。当你把this.objform三次放进arr数组时，数组里存储的并不是三个独立的表单组副本，而是三个指向同一个内存地址的引用。也就是说，数组里的三个“元素”其实都是同一个FormGroup对象。

所以当你调用setValue()方法时，不管你是想更新数组里的哪一个条目，本质上都是在修改同一个FormGroup实例。最后所有数组元素显示的自然都是最后一次修改的结果，看起来就像是全部重复了。

怎么解决？ #

解决办法很简单：每次向数组添加表单组时，都创建一个新的FormGroup实例，不要复用同一个。你可以写一个工厂函数来统一创建表单：

// 定义一个创建objform的工厂函数
createObjForm(): FormGroup {
  return this.fb.group({ 
    val: null, 
    string: '', 
    arr: this.fb.array([null, null, null]) 
  });
}

然后修改nestedform的初始化代码：

this.nestedform = this.fb.group({ 
  arr: this.fb.array([
    this.createObjForm(), 
    this.createObjForm(), 
    this.createObjForm()
  ]), 
  test1: null, 
  test2: "" 
});

这样数组里的三个元素就是完全独立的FormGroup实例了，后续调用setValue()时，每个条目都会被单独修改，不会再出现全部重复的问题。

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