Setting angular variables by assigning form values

Question

Setting angular variables by assigning form values

My current reactive form setup looks 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]),   
});

When I use the onSubmit() function, I encounter an issue where changing the submitValue variable also alters the value in the editForm. Here is a snippet of my code:

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

I specifically want to get the form value from the editForm and handle it separately in the submitValue variable without affecting the original form values. Is there a solution to achieve this separation?

angular typescript angular-reactive-forms

Answer 1

Answer №1

let submittedValue = Object.assign({}, this.editform.value);

**Insight:**
  When we use the assignment operator to assign an object to another variable, it works by reference and preserves it.

For example:

let x = {name: 'def', age: 15};
   let y = x;
   y.age = 16;
   console.log(x,y) // Both x.age and y.age are now 16

If you try the following code

let y = Object.assign({}, x);
   y.age = 16;
   console.log(x) // The original value of x remains unchanged because of Object.assign()

**Explanation of Object.assign()**

   In the target object, properties will be overwritten by properties in the sources if they share the same key.

Answer 2

let submittedValue = Object.assign({}, this.editform.value);

**Insight:**
  When we use the assignment operator to assign an object to another variable, it works by reference and preserves it.

For example:

let x = {name: 'def', age: 15};
   let y = x;
   y.age = 16;
   console.log(x,y) // Both x.age and y.age are now 16

If you try the following code

let y = Object.assign({}, x);
   y.age = 16;
   console.log(x) // The original value of x remains unchanged because of Object.assign()

**Explanation of Object.assign()**

   In the target object, properties will be overwritten by properties in the sources if they share the same key.

Answer 3

Answer №2

To resolve this problem, you can create a deep copy of the reference using different methods such as

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

or

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

or by utilizing the lodash cloneDeep function

Answer 4

To resolve this problem, you can create a deep copy of the reference using different methods such as

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

or

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

or by utilizing the lodash cloneDeep function

Answer 5

Answer №3

Indeed! An option is to generate a middle submitContent entity, duplicating the form's content and replacing specific parts of it:

const submitContent = { ...this.formData.value, name = 'Alice' };

Answer 6

Indeed! An option is to generate a middle submitContent entity, duplicating the form's content and replacing specific parts of it:

const submitContent = { ...this.formData.value, name = 'Alice' };

Setting angular variables by assigning form values

Answer №1

Answer №2

Answer №3

Similar questions

Tips for ensuring a method is not invoked more than once with identical arguments

There is no corresponding version available for [email protected] in Angular 6

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

Creating the upcoming application without @react-google-maps/api is simply not possible

Locate the minimum and maximum values between two inputted dates

Loading data from a remote source in an Angular 6 material table: A step-by-step guide

Managing external dependencies in NX & Angular compatible libraries

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Angular 4's OrderBy Directive for Sorting Results

Extracting information from an Observable in Angular: A comprehensive guide

Tips for adjusting the time format within Ionic 3 using TypeScript

Enhancing validation in Express with custom Typescript types for validation in Express Validator

Suggestions for developing a component library for angular/react modules

Enhancing Readability of Public Static Member Variables in Typescript

What is the best way to implement the useCallback hook in Svelte?

What is the best way to determine Prisma types across various projects?

Discover the steps to include the property within the data model in Angular specifically meant for showcasing on the user interface list page

I am attempting to incorporate an NPM package as a plugin in my Next.js application in order to prevent the occurrence of a "Module not found: Can't resolve 'child_process'" error

Implement the properties encapsulation design pattern

To continue receiving rxjs updates, kindly subscribe if the specified condition is met