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

这不完全是解决问题的方法，而是解决任务的另一种方法：）

您可以使用.reset()方法：this.formGroup.reset(this.testData)来代替修补所有值。

其他信息位于documentation中。

Answer 2

您应像这样更改patchMultipleValues（{{1}周围的注意[]））

valueToPatch

Answer 3

您应删除[]这样的符号

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

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

那应该很好

角形组patchValue值周围的花括号

3 个答案: