来自选择下拉菜单的 Angular 表单合并数据答案

【问题标题】：Angular Form merge data from select dropdown menus来自选择下拉菜单的 Angular 表单合并数据
【发布时间】：2023-03-24 10:06:01
【问题描述】：

如何将下拉菜单中的值合并到对象数组中？有两个带有预填充值的下拉菜单（个人和国家）

因此，在将国家/地区分配给人员时，我试图根据用户选择获取对象数组中的数据，例如：[{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}]。

我正在尝试使用 FormArray，但我做错了什么

Stackblitz

【问题讨论】：

表单数组用于 *ngFor。查看stackoverflow.com/questions/52530584/…。
是的，谢谢。有没有办法将所有对象从表单推送到数组？它只提交最后一个对象stackblitz.com/edit/…

标签： angular drop-down-menu angular-forms formarray angular-formbuilder

【解决方案1】：

您需要根据人数数据向 formArray 添加一个 formGroup，因此如果您有两个人，则必须创建两个 formGroup

喜欢这个

this.selectForm = this.formBuilder.group({
  persons: this.formBuilder.array([
    this.formBuilder.group({
      'person': '',
      'country': ''
    }),
    this.formBuilder.group({
      'person': '',
      'country': ''
    })
  ])
});

或根据人员增加一个表单组

this.selectForm = this.formBuilder.group({
  persons: this.formBuilder.array(this.getFormGroupByN(this.personsData.length)
  )
});


getFormGroupByN(n: number) {
  let result = []
  for (let i = 0; i < n; i++) {
    result.push(this.formBuilder.group({
      'person': '',
      'country': ''
    })
    );
  } // for end 

  return result;
}

我已经创建了一个变量来保存名为personsData 的人员数据，因此我可以循环抛出并创建选项元素

this.personsData = this.parts.map(part => part.persons).reduce((r, part, []) => r.concat(part));

结果现在看起来像这样

[{"person":"John","country":"USA"},{"person":"Pablo","country":"Mexico"}]

stackblitz demo

【讨论】：