业务场景
利用FormArray来构建动态表单，这个需求在实际开发中挺常见的。简单来说就是，每创建一个新的表单，页面上就会多出一个input框，显示表单的标题；点击这个标题旁边的编辑按钮，又能弹出一个模态框，让你修改表单的具体内容。
核心逻辑先复习一下，搭配代码看更清晰：
// 封装获取modelList
get modelList() {
return this.formGroup.get('modelList') as FormArray
}
constructor(private fb: FormBuilder) {}
ngOnInit() {
// 一开始初始化arr为空数组
this.formGroup = this.fb.group({
// 内部嵌套FormControl、FormArray、FormGroup
modelList: this.fb.array([])
})
}
// 模态框构造内部的表单
function newModel() {
return this.fb.group({
modelName: [''],
// 可以继续嵌套下去，根据业务需求
})
}
// 省略模态框部分代码
// 传递到模态框的FormArray
selectedType: FormArray
但问题来了，这种模态框的设计有点特殊——它把表单原有的FormGroup关系给拆散了。当你在页面上点击编辑时，需要把当前项的参数传到模态框里，并显示已有值。很多人想到的做法是直接拿this.modelList.at(index)这个实体来赋值给模态框，然后在模态框里改。
表面上看没什么问题，但等你点完保存回到页面就会发现：诶？改的值怎么没更新？反过来，直接改页面上的input，模态框里的内容倒是一起变了。
更有意思的是，如果你是在模态框里新增表单，保存之后却能正常响应到页面上。
表单列表
表单详情【模态框】
原错误代码思路
先说说很多人一开始会怎么写，也是踩坑的高发区。
- 点击编辑后，直接把FormArray中对应索引的元素赋值给一个临时变量：
this.selectedType =，然后把这个变量传给模态框，用于显示和修改。this.modelList.at(index); - 模态框里改完后，点保存，再把改完的值塞回原FormArray的对应位置。
this.modelList.removeAt(this.modelIndex) this.modelList.insert(this.modelIndex, this.selectedType)
- 新增的情况则简单一些：创建新的FormGroup对象，保存时直接push进原FormArray。
newModelType(): FormGroup {
return this.fb.group({
modelName: ['', Validators.required],
configList: this.fb.array([]),
});
}
// ...省略
// 模态框显示
show() {
this.isVisible = true
this.selectedType = this.newModelType();
}
// 保存
sa ve() {
this.isVisible = false
// 原页面FormArray
this.modelList.push(this.selectedType);
}
乍一看，这个逻辑似乎没什么破绽。但跑起来你就会发现：页面上直接修改input的值，变化能同步到模态框；可模态框里改完了保存回来，外部页面却纹丝不动。
用console一眼看下去，FormArray内部的参数其实已经变了，但Angular就是没检测到。
这时候很多人会下意识想到：是不是Angular的变更检测没触发？于是去翻文档，发现文档里确实有一段很关键的话。
但细品就会发现，尽管我遵循了“不直接修改FormArray内部元素，而是通过removeAt和insert来替换”这个原则，实际上在模态框赋值这一步就已经犯规了。
问题出在哪呢？关键就在于，你赋值给模态框的临时变量，拿到的其实是原FormArray里那个元素的同一个实例。在模态框里改的，和页面FormArray里存的是同一个对象。所以即便你后来执行了removeAt再insert，本质上是同一个引用在换来换去——Angular根本没察觉到“变化”，自然就不会触发视图更新。
this . mode llist. removeAt ( this . mode lIndex ) this . modell ist. insert(this . modelIndex, this . se lectedType)
所以正确的做法是啥？？
一句话总结：别偷懒。无论编辑还是新增，赋值给模态框时，不能直接拿原对象的引用，必须重新创建新对象，再把旧值拷贝过来。说白了就是深拷贝。
this.selectedType = this.newModelType();
const old = this.modelList.at(index);
this.selectedType.setValue({
'modelName': old.get('modelName').value
})
这样操作之后，模态框里的修改就和原FormArray彻底解耦了。你再保存，Angular就能正确识别引用变化，视图也会乖乖更新。
总结
回顾整个排查过程，最终还是回到了Angular文档上。这大概是一个老生常态的话题：很多看似诡异的问题，本质上都是对框架底层机制的理解不够透彻。尤其是在国内Angular相关的资料相对稀缺的情况下，遇到这样的坑只能去外网论坛一点点翻找。
不过踩过之后，能彻底弄明白其中的原理，也算是值了。希望这篇复盘能帮你少走一些弯路。
