angular - Angular FormGroup FormArray - 从下拉列表中仅提交数组中的一个对象

Question

我正在尝试从下拉值创建对象数组：

所以从图片中选择值的结果将是[{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico'}]，但表单只提交最后一个对象。

堆栈闪电战

Answer 1

问题是您只创建了 1 个 FormGroup：

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

您应该进行迭代this.parts以动态创建它们：

const persons = <FormArray>this.selectForm.get('persons');

this.parts.forEach((part) => {

  part.persons.forEach((person) => {
    persons.push(this.formBuilder.group({country: null, name: person.name}));
  })
});

这将为您提供两个FormGroup实例，每个实例都有一个country和一个name属性。这是一种更直接的方式，它不像您当前的解决方案那样混乱。您必须相应地更新模板。

Answer 2

您可能正在复制 formControls 而不是在 ngFor 循环中创建新的。为每次迭代添加唯一的名称以形成控件，它应该可以工作。