Angular form group patchValue wrapping braces around values

Question

I am building a reactive form using form builder. The form data will need to be updated dynamically. To achieve this, I created a function that iterates the keys in an object and patches the form values with the matching key names. This works for the most part, however, the resulting form values have extra braces [] around the values. I am probably missing something obvious here.

Here is the function that iterates an object keys and patches each value where the key name matches the form control name:

  /**
   *
   * @param {object} formGroup form group to update
   * @param {object} formValues the form control name as the key and the value to patch
   */
  public patchMultipleValues(formGroup, formValues) {
    for (let key in formValues) {
      let keyToPatch = key;
      let valueToPatch = formValues[key];

      // Patch value
      formGroup.patchValue({ [keyToPatch]: [valueToPatch] });
    }
  }

Here is example test data and a test form group:

  testData = {
    'Title': 'Example title',
    'Description': 'This is an example description for testing',
    'Items': ['A', 'B', 'C', 1, 2, 3]
  }

  this.testForm = this.fb.group({
    Title: [null],
    Description: [null],
    Items: [null]
  });

Here is the call to the function:

this.patchMultipleValues(this.testForm, this.testData);

Here is the resulting form value with the extra braces wrapped around each value. The Title and Description should just be strings and Items should just be a single array.

formGroup.value {"Title":["Example title"],"Description":["This is an example description for testing"],"Items":[["A","B","C",1,2,3]]}

Question: How can I update the code such that the correct values are patched? I tried removing the braces from the this.fb.group definition but that does not work correctly.

Answer 1

This is not exactly the solution to your problem, but a different approach to your task :)

Instead of patching all the values you could use the .reset() method: this.formGroup.reset(this.testData) .

Further information is in the documentation .

Answer 2

You should change your patchMultipleValues like this (Notice no [] around valueToPatch ):

/**
   *
   * @param {object} formGroup form group to update
   * @param {object} formValues the form control name as the key and the value to patch
   */
  public patchMultipleValues(formGroup, formValues) {
    for (let key in formValues) {
      let keyToPatch = key;
      let valueToPatch = formValues[key];

      // Patch value
      formGroup.patchValue({ [keyToPatch]: valueToPatch });
    }
  }

Answer 3

You should remove [] sign like this

 public patchMultipleValues(formGroup, formValues) {
    for (let key in formValues) {
      let keyToPatch = key;
      let valueToPatch = formValues[key];

      // Patch value
      formGroup.patchValue({ [keyToPatch]: valueToPatch });
    }
  }

Then it's should be good