角：创建基于另一种形式的一种新形式

让我们假设有一个表格，像这样（我的实际形式更复杂）：角：创建基于另一种形式的一种新形式

this.group = this.formBuilder.group({ 
    name: '', 
    email: '' 
});

我的形式配置工作那么远，现在我我希望在将表单提交给API之前更改一些值，并且由于我想保留原始表单的引用和值，因此我更喜欢克隆表单。所以我试图做这样的：

const cloneGroup = this.formBuilder.group(this.group.controls); 
// Shouldn't it create a form with a new reference, 
    since it creates a new FormGroup internally?

的问题是，一旦我称之为patchValue方法cloneGroup，this.group也发生变化，并且OFC我要改变只克隆。

这是demo，你可以玩，看到更好的我的问题。

的问题是：为什么？如果我创建了一个新的表单，是不是应该创建一个真正的新表单？

PS：如上所述，我不想因为我想保留原来的形式的参考和值（调用窗体本身的一些方法）克隆仅值，所以只是克隆的价值不是一种选择。

来源

2017-06-02 dev_054

你是否设法找到克隆'formGroup'的方法？我也被困在这个确切点上。 – Thodoris

我不太清楚你在克隆表单时想达到什么，但是如果你只关注于拥有两个独立的表单让你的克隆工作的一种方法是专注于重用表单配置，而不是表单控制自己。然后，您可以使用getValue和setValue针对您的克隆在您离开之前使用原始值对其进行更新并对克隆进行更改。

所以，你可以这样做：

let formConfig = { 
    name: '', 
    email: '' 
}; 

this.group = this.formBuilder.group(formConfig); 
this.clone = this.formBuilder.group(formConfig); 

....... 

// and then later when you want to use the clone 
this.clone.setValue(this.group.getValue()); 

// and then you can update your clone.. 
this.clone.patchValue(....);

上述方法应该能正常运行，一旦你不需要让你的克隆实时，同步与原来的形式，而是可以在特定更新时间。如果你需要实时同步，它会变得稍微复杂一些，但是同样的基本逻辑将适用 - 订阅原始值的ChangeChanges，并在每个事件上更新你的克隆。

来源

2017-06-02 00:54:12 snorkpete

感谢您的回答......好的，有问题的表单只是一个例子。正如我所解释的，我希望在将表单发送到API之前克隆表单以执行一些更改，例如删除一些控件，修补一些值......我想知道为什么要这样创建一个新表单：'this.formBuilder.group（。 ..）'不起作用，我的意思是......为什么它保持原始形式的参考。是不是很奇怪，因为'this.formBuilder.group'在内部调用'新的FormGroup（...）'？ –

是的，但是您没有将窗体控件配置信息传递给新窗体，而是将引用传递给已经创建的窗体控件。因此，他们被“共享”的原因 - 您只是创建了完全相同的表单控件对象的不同分组。 – snorkpete

Humm ..简而言之，有没有办法在不保留原始表单的情况下克隆formGroup？ –

角：创建基于另一种形式的一种新形式

回答

相关问题