基于API数据构建Angular响应式表单时出现读取错误，求解决方案

错误根源 #

1. 数组访问错误：data.cars是数组类型，你直接通过data?.cars?.Reason、data?.cars?.Period?.Start访问属性，本质是在访问数组的属性而非数组元素的属性，必然返回undefined，进而导致读取Start时抛出错误。
2. 表单赋值逻辑错误：addDetailFormGroup方法里错误地重新赋值this.form，会覆盖主表单实例，导致结构混乱。
3. FormGroup构造参数错误：创建Period表单组时，传入了数组[this.initListFormGroup()]，但FormGroup的构造函数要求传入控件配置对象，而非数组。
4. 方法作用域问题：initListFormGroup嵌套在addDetailFormGroup内部，无法正确获取单个车辆的数据上下文。

修正后的代码 #

// 初始化主响应式表单
this.form = this.formBuilder.group({
  extraInformation: [this.data.extraInformation, [Validators.required]],
  // 遍历API返回的cars数组，为每辆车创建子表单组
  cars: this.formBuilder.array(
    this.data.cars.map(car => this.createCarFormGroup(car))
  )
});

// 创建单个车辆的表单组
createCarFormGroup(car: any): FormGroup {
  return this.formBuilder.group({
    Id: [car.Id], // 保留API返回的Id，提交更新时可能需要
    Reason: [car.Reason, Validators.required],
    Rentalstats: [car.Rentalstats, Validators.required],
    Period: this.createPeriodFormGroup(car.Period)
  });
}

// 创建Period子表单组
createPeriodFormGroup(period: any): FormGroup {
  return this.formBuilder.group({
    Start: [period?.Start, Validators.required],
    End: [period?.End, Validators.required]
  });
}

关键修正点 #

• 用this.data.cars.map遍历所有车辆数据，批量创建子表单组，满足多子表单的需求。
• 每个子表单组直接使用传入的单个car对象获取属性，避免数组访问错误，同时用period?.Start处理period为null的边界情况。
• 子表单方法仅返回创建好的FormGroup实例，不再覆盖主表单。
• 采用formBuilder统一创建表单控件，符合Angular响应式表单的最佳实践，同时避免构造参数错误。

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