Angular: Create a new form based on another form

Viewed 1806

Let's suppose that have a form, like this (my real form is more complicated):

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

My form configuration works so far... now I'm wanting to change some values before submit the form to the API... and since I want to keep the reference and value of the original form` untouched, I prefer to clone the form. So I'm trying to do it like this:

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?

The problem is that once I call patchValue method in cloneGroup, this.group also changes, and ofc I want only the clone to be changed.

Here's the demo that you can play to see better my question.

The question is: Why? If I created a new form isn't it supposed to create a really new form?

PS: As explained above, I don't want to clone only the values because I want keep the reference and values of the original form (to call some methods of the form itself), so just cloning the value isn't an option.

1 Answers
Related