Угловая группа форм patchValue, заключающая в скобки значения

Question

Я создаю реактивную форму, используя конструктор форм. Данные формы необходимо будет обновлять динамически. Чтобы добиться этого, я создал функцию, которая перебирает ключи в объекте и связывает значения формы с соответствующими именами ключей. Это работает по большей части, однако полученные значения формы имеют дополнительные скобки [] вокруг значений. Я, вероятно, здесь упускаю что-то очевидное.

Вот функция, которая перебирает ключи объекта и исправляет каждое значение, где имя ключа соответствует имени элемента управления формы:

  /**
   *
   * @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] });
    }
  }

Вот пример тестовых данных и группы тестовых форм:

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

Вот вызов функции:

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

Вот результирующее значение формы с дополнительными скобками, обернутыми вокруг каждого значения. Заголовок и описание должны быть просто строками, а элементы - просто одним массивом.

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

Вопрос: Как я могу обновить код так, чтобы исправлялись правильные значения? Я попытался удалить фигурные скобки из определения this.fb.group, но это не работает правильно.

Answer 1

Вы должны изменить свой patchMultipleValues следующим образом (Примечание № [] около 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 2

Вы должны удалить знак [], как это

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

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

Тогда это должно быть хорошо

Answer 3

Это не совсем решение вашей проблемы, но другой подход к вашей задаче:)

Вместо исправления всех значений вы можете использовать метод .reset(): this.formGroup.reset(this.testData).

Дополнительная информация содержится в документации .