Angular 来自 select 下拉菜单的表单合并数据

Question

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

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

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

Answer 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;
}

我已经创建了一个变量来保存 persons 数据 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

Angular 来自 select 下拉菜单的表单合并数据

Angular Form merge data from select dropdown menus

drop-down-menu

angular

angular-forms

formarray

angular-formbuilder