Question

我们假设有一个表格，就像这样（我的真实形式更复杂）：

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也会发生变化，而且我只希望更改克隆。

在这里demo你可以发挥更好的问题。

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

PS ：如上所述，我不想只克隆值，因为我想保留原始表单的引用和值（调用表单本身的某些方法），所以只是克隆价值不是一个选择。

Answer 1

我不太确定你要克隆表单的目的是什么，但如果你只是专注于有两个独立的表单让克隆工作的一种方法是专注于重用表单配置，而不是表单控件本身。然后，您可以对克隆使用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(....);

一旦您不需要使克隆实时与原始表单同步，而是可以在特定时间更新它，上述方法应该可以正常工作。如果你需要实时同步，它会变得稍微复杂一点，但是同样适用基本逻辑 - 订阅原始的valueChanges，并在每个事件上更新你的克隆。

Angular：基于另一个表单创建一个新表单

1 个答案: