Angular中能否实现两层深度的FormGroup嵌套？

Angular完全支持超过一层深度的FormGroup嵌套，这是响应式表单的常规用法，不存在深度限制。你遇到的PUT请求体不同步问题，是代码里的循环引用导致的，和嵌套本身无关。

你的代码问题所在 #

你写了parentform.AddControl('original parent', parentform);——这相当于把原父表单自身作为子控件添加进去，形成了循环引用结构，这种情况下表单的value必然异常，无法正确同步到请求体中。

正确的实现方式 #

你需要创建一个全新的顶层FormGroup，然后把独立的seperate formgroup和**原有的parentform（注意不是当前操作的这个parentform变量）**作为子控件添加进去：

// 假设原有的父表单是 originalParentForm: FormGroup
// 独立的表单是 seperateForm: FormGroup

// 创建新的顶层父表单
const newParentForm = new FormGroup({});

// 添加独立表单作为子控件
newParentForm.addControl('seperate', seperateForm);

// 添加原父表单作为子控件
newParentForm.addControl('originalParent', originalParentForm);

验证请求体同步 #

之后直接使用newParentForm.value就能获取到正确的嵌套结构数据，用于PUT请求即可。这个结构完全符合你预期的两层嵌套：

newParentForm
├─ seperate (FormGroup)
└─ originalParent (FormGroup)
   └─ 原有的各个子FormGroup

如果需要包含禁用状态的控件值，可以用newParentForm.getRawValue()替代value。

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