表单数组只显示一项

Question

我正在使用带有表单生成器的反应式表单来填充我的表单。

我这样定义我的表单：

public myForm = this.formBuilder.group({
  something: [''],
  people: this.formBuilder.array([this.newPerson()]),
});

newPerson() 函数如下所示：

public newPerson(): FormGroup {
  return this.formBuilder.group({
    firstName: [''],
    lastName: [''],
  },);
}

在 OnInit() 中，我想用一些数据填充此表单，这是我遇到问题的地方。如果我这样做：

this.getPeople().patchValue([
  { firstName: 'Bla', lastName: 'Bla' },
  { firstName: 'Test', lastName: 'Test' }, 
]);

我在表格中只看到 Bla Bla，但看不到 Test Test。为什么会这样？

Answer 1

this.formBuilder.array([this.newPerson()]) => 这将创建一个具有单个 formGroup 的 formArray。您必须调用 this.newPerson() 两次才能创建 2 个表单组，然后调用 patchValue

public myForm = this.formBuilder.group({
  something: [''],
  people: this.formBuilder.array([this.newPerson(), this.newPerson()]),
});

Form array only showing one item