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

Question

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

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

Stackblitz

Answer 1

问题是您仅创建1个FormGroup：

while (A[i].isdigit() == false) // if it is not a number
cout<<"Enter again : "

您应该进行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属性。这是一种更直接的方法，并且没有当前解决方案那么麻烦。您必须相应地更新模板。

Answer 2

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