来自选择下拉菜单的Angular Form合并数据

Question

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

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

我正在尝试FormArray，但我做错了事

Stackblitz

Answer 1

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

喜欢

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

或基于人员创建一个formGroup

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