Angular 5如何通过编程方式获取表单控件的直接FormGroup名称

嘿，要拿到state控件所属的FormGroup名称（也就是"address"），咱们可以利用Angular表单控件的parent属性结合遍历的方式来实现，具体步骤如下：

首先先回顾下你的表单结构：

this.birthForm = this.fb.group({ 
  address: this.fb.group({ 
    id: null, 
    state: null, 
    zip: null 
  }) 
});

实现步骤 #

1. 获取目标控件：先精准定位到state控件

const stateControl = this.birthForm.get('address.state') as FormControl;

2. 遍历根表单控件，匹配父FormGroup
   因为Angular的FormControl的parent属性会直接指向它所属的FormGroup，但FormGroup本身没有暴露名称属性，所以我们需要遍历根表单的所有控件条目，找到和stateControl.parent匹配的那个键，就是我们要的FormGroup名称：

const parentGroupName = Object.entries(this.birthForm.controls)
  .find(([key, control]) => control === stateControl.parent)
  ?.[0];

// 打印结果就是 "address"
console.log(parentGroupName);

补充说明 #

如果你的表单是更深层次的嵌套（比如多层FormGroup嵌套），可以把这个逻辑封装成一个递归函数，逐层向上查找对应的父FormGroup名称，但针对你当前的场景，上面的代码完全够用啦。

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