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

Question

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

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

Answer 1

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

Answer 2

问题是您只创建了 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 属性。这是一种更直接的方法，它不像您当前的解决方案那样混乱。您必须相应地更新模板。

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

Angular FormGroup FormArray - submits only one object in array from dropdown

typescript

angular

angular-forms

formarray

angular-formbuilder