Reactive Forms patchValue() in For loop

Question

Following sample code:

model={name: "D100"
value: "Dying"};

   for (let key in model) {
            if(this.divisionForm.controls.hasOwnProperty(key)) {
                let value = divisionModel[key];
                this.form.patchValue({
                    key: value
                });
            }
        }

• Is there any way to achieve the looping object and insert key value pair into the Angular reactive form's patchValue()
• I cannot have values to get set in form i can achieve this by manually add setValue() and use destructuring to get the objects and set which leads very long code in bigger forms.

I have structed in this for long time kindly help me. Thanks in advance.

Answer 1

try this, No need to use loop

this.form.patchValue(model)

For information visit, https://dev.to/crazedvic/using-patchvalue-on-formarrays-in-angular-7-2c8c

Answer 2

Simply spread your form value and override the properties you want to change.

As a sidenote, patchValue is supposed to keep the values of the keys you don't provide, e.g. giving a single key will keep all other keys to their actual value.

Here is a stackblitz : https://stackblitz.com/edit/angular-xlxcic?file=src%2Fapp%2Fapp.component.ts

  constructor() {
    const form = new FormGroup({
      name: new FormControl(''),
      surname: new FormControl('')
    });

    form.patchValue({
      ...form.value,
      name: 'name of the user'
    });

    form.patchValue({
      surname: 'surname of the user, with name kept'
    });

    console.log(form.value);
  }