Angular响应式表单不同FormGroup中能否使用相同键名？

核心结论 #

Angular响应式表单完全支持在不同FormGroup分组下使用相同键名，你贴出的示例写法可以正常运行，不存在框架层面的负面副作用。

原因说明 #

每个FormGroup实例都会独立维护自身的控件存储映射，不同子分组是完全隔离的独立命名空间，内部的控件键名不会跨分组产生冲突、覆盖问题。
你给出的示例代码完全符合Angular响应式表单的语法规范：

new FormGroup({
  firstGroup: new FormGroup({
    firstName: new FormControl(),
    secondName: new FormControl(),
  }),
  secondGroup: new FormGroup({
    firstName: new FormControl(),
    secondName: new FormControl(),
  })
});

表单实例运行时，调用根表单的value属性会返回和定义结构完全一致的嵌套对象，同键名的控件值会分别归属到对应父分组下，不会出现值覆盖：

// 表单赋值后的返回值结构示例
{
  firstGroup: {
    firstName: '张',
    secondName: '三'
  },
  secondGroup: {
    firstName: '李',
    secondName: '四'
  }
}

两个重名控件的校验状态、禁用/启用状态、值变更事件也完全独立，不会互相干扰。

使用注意事项 #

写法本身没有问题，只需要在操作控件时注意路径正确性即可，避免人为使用失误导致异常：

• 代码中通过get()方法获取控件时，必须写全完整嵌套路径：获取第一个分组的firstName要写form.get('firstGroup.firstName')，获取第二个分组的要写form.get('secondGroup.firstName')，路径写对就不会出现取错控件的问题
• 模板中绑定控件时，要确保formGroupName的作用域对应正确，要么在对应父分组的DOM容器上声明formGroupName="firstGroup"后再在内部写formControlName="firstName"，要么直接用完整路径绑定，不要漏写父级分组名导致匹配到错误分组的控件
• 仅平级的同一个FormGroup下不允许出现重复键名：如果在同一个FormGroup的直接子级写两个同名键，后声明的控件会直接覆盖先声明的控件，才会产生逻辑异常。

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