Добавить значения формы в переменную в Angular

Question

У меня есть такая реактивная форма:

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]),   
});

В функции onSubmit () я создаю переменную с именем submitValue и передаю значение формы этому varibale:

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

Но всякий раз, когда я меняю значение submitValue, значение editForm также изменяется. Я хочу только получить значение формы из формы редактирования и обработать его в submitValue. Могу ли я это сделать?

Answer 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.

Пример:

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

Теперь, если вы используете код ниже

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.

Answer 2

Это справочная проблема, вы можете глубоко скопировать ссылку, используя любой метод, например

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

или

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

, или используя функцию loda sh cloneDeep

Answer 3

Конечно. Вы можете создать промежуточный объект submitValue, копируя значение формы и перезаписывая его части:

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