Angular FormArray与模态框结合使用实例详解

业务场景

利用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，模态框里的内容倒是一起变了。

更有意思的是，如果你是在模态框里新增表单，保存之后却能正常响应到页面上。

表单列表

表单详情【模态框】

    

        
            
                
              
              
                
              
        
    


  
    

      
        Model Test
        
          
        
      
      
        
          
        
      
    
  
  
    删除
    取消
    保存
  

原错误代码思路

先说说很多人一开始会怎么写，也是踩坑的高发区。

• 点击编辑后，直接把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相关的资料相对稀缺的情况下，遇到这样的坑只能去外网论坛一点点翻找。

不过踩过之后，能彻底弄明白其中的原理，也算是值了。希望这篇复盘能帮你少走一些弯路。