Add form values to variable in Angular

Question

I have a Reactive Form like this :

this.editform = new FormGroup({
  'username' :  new FormControl(null,[Validators.required]),  
  'password' :  new FormControl(null,[Validators.required]),  
  'full_name' :  new FormControl(null,[Validators.required]),  
  'avatar' :  new FormControl(null,[Validators.required]),   
});

In onSubmit() function, I create a variable named submitValue and pass form value to this varibale:

   onSubmit() {
    const submitValue = this.editform.value
    submitValue.username = 'Jon';
    console.log(this.editform.value.username) // Output : 'Jon'  [The value of editform also changed]
  }

But whenever I change submitValue value, the editForm value also changed. I only want to get form value from edit form and handle it in submitValue. Is there anyway that I can do it.

Are you trying some like const submitValue={...this.editform.value} (a copy of the object)? — Eliseo
– Eliseo, Commented May 6, 2020 at 8:10

Aravind · Accepted Answer · 2020-05-06 07:09:18Z

1

It is a reference issue, you can deepCopy the reference using any method like

const submitValue = Object.assign({},this. editform.value);

or

const submitValue = JSON.parse(JSON.stringify(this. editform.value));

or using lodash cloneDeep function

answered May 6, 2020 at 7:09

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vinay Jadhav · Accepted Answer · 2020-05-06 08:43:27Z

1

const submitValue = Object.assign({},this. editform.value);

**Explanation:**
  Whenever we use an assignment operator to assign an object to another variable, it uses pass by reference and maintains it.

Example:

var a = {name: 'abc', age: 12,};
   var b = a;
   b.age = 13;
   console.log(a,b) // you can see a.age is also having 13

Now if you use below code

var b = Object.assign({}, a);
   b.age = 13
   console.log(a) // This will not change a due to Object.assign()

**Object.assign()**

   Properties in the target object are overwritten by properties in the sources if they have the same key.

answered May 6, 2020 at 8:43

Vinay Jadhav

3641 silver badge6 bronze badges

Comments

mbojko · Accepted Answer · 2020-05-06 07:07:49Z

0

Sure. You can create an intermediate submitValue object, copying the form's value and overwriting parts of it:

const submitValue = { ...this.editform.value, username = 'Jon' };

answered May 6, 2020 at 7:07

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

Add form values to variable in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related