Angular响应式嵌套表单问题：FormArray数据未完整加载

问题原因 #

你初始化FormArray时只创建了1个FormGroup，而patchValue的核心行为是仅更新表单中已存在的控件值，不会自动为FormArray新增FormGroup元素。所以即使你的JSON数据里有2个parameters对象，patchValue只会更新FormArray里已有的那1个对象，第二个对象不会被添加到表单中。

解决方案 #

要让FormArray匹配JSON数据的长度，需要手动遍历数据并添加对应的FormGroup，再结合patchValue完成赋值：

1. 先添加一个FormArray的getter方法，方便后续快速访问：

get parameters(): FormArray {
  return this.formClient.get('machine.parameters') as FormArray;
}

2. 修改ngOnInit方法，先清空初始的FormArray元素，再遍历JSON数据添加新的FormGroup，最后调用patchValue：

ngOnInit() {
  console.log('my data ', this.my_json);
  
  // 清空FormArray中初始化的默认控件
  this.parameters.clear();
  
  // 遍历JSON中的parameters数组，逐个创建FormGroup并添加到FormArray
  this.my_json.machine.parameters.forEach(param => {
    this.parameters.push(this.formBuilder.group({
      description: [param.description],
      factoryValue: [param.factoryValue],
      parameter: [param.parameter]
    }));
  });
  
  // 用patchValue更新表单其他字段的值
  this.formClient.patchValue(this.my_json);
  
  console.log('my form values ', this.formClient.value);
}

这样处理后，FormArray就会包含2个对象，和你的JSON数据完全匹配。如果后续需要动态添加或删除参数项，也可以复用上述添加FormGroup的逻辑。

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