Angular组件内三级嵌套响应式表单报错：找不到child2Group控件

问题核心 #

父组件已正确定义三级嵌套表单结构，但child1组件未正确传递child2Group表单组给child2组件，也未在模板中建立对应的表单组上下文关联，导致Angular无法定位目标控件。

修复步骤 #

1. 为child1组件添加child2Group输入属性
   在child1.component.ts中新增输入属性，用于接收父组件传递的child2Group表单组：

   import { Component, Input } from '@angular/core';
   import { FormGroup } from '@angular/forms';
   
   @Component({
     selector: 'app-child1',
     templateUrl: './child1.component.html',
     styleUrls: ['./child1.component.css']
   })
   export class Child1Component {
     @Input() child1Group!: FormGroup;
     @Input() child2Group!: FormGroup;
   }
   

2. 父组件模板传递child2Group给child1组件
   在父组件模板中调用app-child1时，通过输入绑定传递child2Group：

   <app-child1 
     [child1Group]="form.get('child1Group') as FormGroup"
     [child2Group]="form.get('child1Group.child2Group') as FormGroup"
   ></app-child1>
   

3. child1组件模板绑定表单组给child2组件
   在child1.component.html中，将接收到的child2Group通过[formGroup]传递给app-child2：

   <div [formGroup]="child1Group">
     <input formControlName="child1Control1" placeholder="Child1 Control 1">
     <input formControlName="child1Control2" placeholder="Child1 Control 2">
     <app-child2 [formGroup]="child2Group"></app-child2>
   </div>
   

4. 确认child2组件的表单组输入配置
   检查child2.component.ts是否正确定义输入属性：

   import { Component, Input } from '@angular/core';
   import { FormGroup } from '@angular/forms';
   
   @Component({
     selector: 'app-child2',
     templateUrl: './child2.component.html',
     styleUrls: ['./child2.component.css']
   })
   export class Child2Component {
     @Input() formGroup!: FormGroup;
   }
   

5. child2组件模板关联表单组上下文
   在child2.component.html中使用[formGroup]绑定上下文，确保控件能正确关联到表单组：

   <div [formGroup]="formGroup">
     <input formControlName="child2Control1" placeholder="Child2 Control 1">
     <input formControlName="child2Control2" placeholder="Child2 Control 2">
   </div>
   

关键说明 #

Angular响应式表单嵌套时，每一层子组件都需要通过输入属性明确接收上层传递的表单组，并在模板中通过[formGroup]建立上下文关联，这样框架才能正确定位到对应的表单控件，同时也符合组件封装性要求。

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