angular - Angular：深度复制反应形式

Question

我需要制作一个反应形式的深层副本。我曾尝试使用 ES6 扩展语法来克隆表单。我使用 Typescript 泛型将扩展语法的返回值类型转换为FormGroup. 此外，克隆表单变量的类型设置为FormGroup.

但是当通过这种方式克隆表单时，克隆的表单变量上的类型会丢失，即不再是FormGroup. 所以，克隆的形式是不可用的。

这是相同的堆栈闪电战：形式克隆

上述克隆方式出了什么问题？为什么FormGroup克隆表单上的类型会丢失？

标签： angularangular-reactive-formsdeep-copy

Answer 1

只需使用返回 FormGroup 的函数。您可以使用 setValue 或 patchValue 来提供相同的值。有些喜欢（我直接使用 FormGroup 的构造函数，但你也可以使用 FormBuilder）

  createForm(data:any)
  {
    data=data || {name:null,group:{prop1:null,prop2:null}}
    return new FormGroup({
      name: new FormControl(data.name),
      group:new FormGroup({
        prop1:new FormControl(data.group.prop1),
        prop2:new FormControl(data.group.prop2)
      })
    })
  }

/*you can also
  createForm(data:any)
  {
    const form=new FormGroup({
      name: new FormControl(),
      group:new FormGroup({
        prop1:new FormControl(),
        prop2:new FormControl()
      })
    })
    if (data)
      form.patchValue(data)

    return form
  }
  */

在 ngOnInit 中，例如

  ngOnInit() {
       this.myForm=this.createForm({name:"name",group:{prop1:"prop1",prop2:"prop2"}});
       this.myForm2=this.createForm(null);
       this.myForm2.patchValue(this.myForm.value)
       //or this.myForm2.setValue(this.myForm.value)
  }

关联