Angular的FormArray和模态框结合使用实例详解_AngularJs

业务场景

使用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

表单列表

表单详情【模态框】

<form [formgroup]="formgroup">
    <div formarrayname="modellist">
        <ng-container *nffor="let item of modellist.controls;let i = index" [formgroupname]="i">
            <nz-input-group
                [nzsuffix]="suffixiconsearch"
              >
                <input type="text" nz-input formcontrolname="modelname"/>
              </nz-input-group>
              <ng-template #suffixiconsearch>
                <span
                  nz-icon
                  nztype="edit"
                  class="hover"
                  (click)="showmodal(i)"
                ></span>
              </ng-template>
        </ng-container>
    </div>
</form>
<nz-modal
  [(nzvisible)]="isvisible"
  nztitle="model"
  [nzfooter]="modalfooter"
  (nzoncancel)="handlecancel()"
  (nzonok)="handleok()"
>
  <ng-container *nzmodalcontent>
    <form nz-form [formgroup]="selectedtype">
      <nz-form-item>
        <nz-form-label nzrequired>model test</nz-form-label>
        <nz-form-control>
          <input
            type="text"
            nz-input
            placeholder="请输入modelname"
            formcontrolname="modelname"
          />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <product-config></product-config>
        </nz-form-control>
      </nz-form-item>
    </form>
  </ng-container>
  <ng-template #modalfooter>
    <button *ngif="!isnewmodel" nzdanger nz-button nztype="default" (click)="handledelete()">删除</button>
    <button *ngif="isnewmodel" nz-button nztype="default" (click)="handlecancel()">取消</button>
    <button nz-button nztype="primary" (click)="handleok()">保存</button>
  </ng-template>
</nz-modal>

由于这种模态框比较特殊，割裂了表单的formgroup之间的关系，在点击的时候需要传递参数到模态框显示部分值，如果单纯传递参数使用this.modellist.at(index)获取实体到模态框上进行赋值修改，在模态框点击保存后会发现修改的值没有在表单更新，而表单上对input值修改发现可以影响到模态框的内容。

但是模态框新增的表单却可以响应到页面中去。

原错误代码思路

点击编辑后，将点击的formarray的元素传递给一个临时变量 this.selectedtype = <formgroup>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();
}
// 保存
save() {
    this.isvisible = false
    // 原页面formarray
    this.modellist.push(this.selectedtype);
}

最后发现这种写法只能够单向改变，页面外input修改值会影响到模态框，但是模态框的值改变保存却让外部没有更新。通过console方式查看页面的formarray内部参数发现其实是有改变的，只是angular没有检测到。这个时候判断没有发生响应的原因一般是没有触发angular检测机制，仔细查看文档发现有一行很重要 angular文档在最下面写着

原本第一次阅读的时候，觉得我遵守了这种原则，因为在编辑的时候，我选择了操控原formarray进行元素删除和插入，是遵循了这种规则，但是实际上在模态框赋值就已经违反了这种原则，我在赋值的时候拿了formarray的元素实例赋值给模态框的临时变量，然后更改实例的值，又重新删除插入，本质上操作的是同一个实例，所以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
    })

这时候就可以正常更新了。