嵌套响应式表单组中访问数组的Lint报错及动态表单删行问题

你的代码里直接通过多层controls访问嵌套的FormArray，一方面类型安全性不足（如果中间的FormGroup不存在或类型不符会报错），另一方面这也是Linter提示问题的原因。下面给你几个更规范的解决方案：

方案1：使用get方法直接获取嵌套FormArray #

Angular的FormGroup提供了get方法，可以通过点分隔的路径直接定位嵌套控件，写法更简洁也更安全：

deleteRow(index: number) {
  // 通过路径直接获取目标FormArray，并做类型断言
  const milestonesArray = this.piForm.get('milestoneSaveModel.milestonesToCreate') as FormArray;
  // 增加空值检查，避免控件不存在时调用方法报错
  if (milestonesArray) {
    milestonesArray.removeAt(index);
  }
}

方案2：逐层获取并明确类型断言 #

如果更习惯逐层访问，可以给每一步的控件做明确的类型断言，让TypeScript和Linter都能识别类型：

deleteRow(index: number) {
  // 先获取外层FormGroup并断言类型
  const milestoneSaveGroup = this.piForm.controls['milestoneSaveModel'] as FormGroup;
  // 再获取内层FormArray并断言类型
  const milestonesArray = milestoneSaveGroup.controls['milestonesToCreate'] as FormArray;
  milestonesArray.removeAt(index);
}

进阶优化：添加getter方法简化访问 #

你可以给组件添加一个getter方法，专门用来获取这个FormArray，这样所有需要访问它的地方都能复用，代码更清晰：

// 在组件类中定义getter
get milestonesToCreate(): FormArray {
  return this.piForm.get('milestoneSaveModel.milestonesToCreate') as FormArray;
}

// 简化后的删除方法
deleteRow(index: number) {
  // 可选：防止删除最后一行，根据你的业务需求调整
  if (this.milestonesToCreate.length > 1) {
    this.milestonesToCreate.removeAt(index);
  }
}

这样不管是删除行还是添加行，都可以直接通过this.milestonesToCreate访问目标数组，不用重复写冗长的路径。

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