node.js - Angular 形式组 patchValue 将值包裹在大括号中

Question

我正在使用表单生成器构建响应式(Reactive)表单。表单数据需要动态更新。为了实现这一目标，我创建了一个函数，该函数迭代对象中的键并使用匹配的键名称修补表单值。这在大多数情况下都有效，但是，生成的表单值在值周围有额外的大括号 [] 。我可能在这里遗漏了一些明显的东西。

下面是迭代对象键并修补键名称与表单控件名称匹配的每个值的函数:

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