Angular响应式表单FormArray调用patchValue后仅显示第一条数据是什么原因

问题诱因 #

你初始化people类型的FormArray时，仅添加了1个FormGroup子控件。FormArray的patchValue方法只会对当前已存在的对应位置子控件执行赋值操作，不会自动根据传入的数组长度新增子控件，因此第二条数据没有对应的控件承载，自然不会在页面展示。

修复方案 #

• 方式一：先清空原有FormArray，再根据待填充数据长度批量创建子控件再赋值

const peopleData = [
  { firstName: 'Bla', lastName: 'Bla' },
  { firstName: 'Test', lastName: 'Test' }, 
];
const peopleArray = this.getPeople();
// 清空原有控件
peopleArray.clear();
// 遍历数据创建对应控件并赋值
peopleData.forEach(item => {
  peopleArray.push(this.formBuilder.group(item));
});

• 方式二：先补全FormArray子控件数量再执行patchValue

const peopleData = [
  { firstName: 'Bla', lastName: 'Bla' },
  { firstName: 'Test', lastName: 'Test' }, 
];
const peopleArray = this.getPeople();
// 补全控件数量
while(peopleArray.length < peopleData.length) {
  peopleArray.push(this.newPerson());
}
// 再执行patchValue
peopleArray.patchValue(peopleData);

内容的提问来源于stack exchange，提问作者John Doe