如何在Angular响应式表单（Reactive Forms）中获取Form Control的名称

解决方案 #

你原来的遍历代码存在小问题：Object.keys(costForm)获取的是FormGroup实例自身的属性，而非子控件名称，正确写法应为Object.keys(costForm.controls)。
针对你的需求，推荐两种无需重复遍历父控件、也不会产生冗余参数的方案：

方案1：遍历阶段按需传参

仅给需要控件名的函数传参，不需要的函数直接传入控件即可，无任何冗余参数：

Object.keys(this.costForm.controls).forEach(controlName => {
  const currentControl = this.costForm.get(controlName)!;
  // 不需要控件名的函数正常传参
  commonProcessFunc1(currentControl);
  commonProcessFunc2(currentControl);
  // 仅给需要控件名的函数额外传入名称参数
  conditionalProcessFunc(currentControl, controlName);
})

方案2：扩展控件属性内置名称

适合嵌套层级深、多处需要获取控件名的场景，定义表单时给控件添加自定义属性存储名称，后续任意位置拿到控件即可直接读取，无需传参也无需遍历父控件：

// 表单定义阶段添加自定义属性
costForm = new FormGroup({
  year1: new FormGroup({
    mrc: new FormControl('', {
      __controlName: 'mrc'
    } as any),
    otc: new FormControl('', {
      __controlName: 'otc'
    } as any),
  }, {
    __controlName: 'year1'
  } as any)
})

// 业务函数中直接读取
function needControlNameFunc(control: AbstractControl) {
  const controlName = (control as any).__controlName;
  // 后续条件判断逻辑
}

两种方案的性能都远高于遍历父控件查找名称的实现，可根据你的业务复杂度选择。

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