如何在 Angular2 反应式表单中深度复制 FormArray 条目答案

【问题标题】：How to deep copy a FormArray entry in Angular2 Reactive Forms如何在 Angular2 反应式表单中深度复制 FormArray 条目
【发布时间】：2018-01-20 21:39:56
【问题描述】：

我想获取 FormGroup 对象的深层副本，它是 FormArray 对象中的一个条目。

我在 typescript 中使用推荐的深度复制对象的方法，但它仍然指向原始对象引用。我可以通过一个一个地复制每个字段来解决这个问题。但我想知道是否有更好的方法来实现这一点。

这是我的代码，注释行是没有按预期执行深层复制行为的代码：

edit(i): void {
  this.activeEntry=i;
  const mycontrol = <FormArray>this.languagesForm.controls['languages'];
  const mylanguage=<FormGroup>mycontrol.get([i]);
  //this.languageEditForm = Object.assign(new FormGroup({}),<FormGroup>mycontrol.get([i]));

  this.languageEditForm = this.fb.group({
    name:mylanguage.get('name').value,
    type:mylanguage.get('type').value,
    listening:mylanguage.get('listening').value,
    reading:mylanguage.get('reading').value,
    speaking:mylanguage.get('speaking').value,
    writing:mylanguage.get('writing').value
  });

  console.log(this.languageEditForm.value);
  this.showDialog();
}

【问题讨论】：

标签： angular typescript angular2-forms

【解决方案1】：

Object.assign() 并没有真正按照文档 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 创建完整的深层副本

由于您的所有控件都只是对象，因此它们只会被“克隆”对象引用。

也许lodash _.cloneDeep() 云帮助在这里？！

【讨论】：

这看起来不像是一个有效的答案。你测试过lodash _.cloneDeep() 吗？