Angular:深度复制响应式(Reactive)形式

Question

我需要制作一个响应式(Reactive)表单的深拷贝。
我曾尝试使用 ES6 扩展语法来克隆表单。我已经使用 Typescript 泛型将传播语法的返回值类型转换为 FormGroup .此外，克隆表单变量的类型设置为 FormGroup .

但是这样克隆表单时，克隆的表单变量上的类型就丢失了，即不再是FormGroup的类型。 .因此，克隆形式不可用。

这是相同的堆栈 Blitz :form cloning

上述克隆方式有什么问题？为什么是类型 FormGroup在克隆形式上丢失了吗？

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)
  }

link