Angular嵌套组件中FormGroupDirective依赖注入错误导致表单结构不符合预期

嘿，我来帮你搞定这个表单嵌套的问题～你遇到的核心问题是依赖注入的查找逻辑：Angular会向上遍历组件树，找到最近的FormGroupDirective实例。你的child-control组件直接注入的是根组件<app-component-group>的指令，所以才会把testControl加到根表单里，而不是你期望的嵌套group里。

问题根源 #

你在child-group里只是给根表单添加了一个FormGroup控件，但没有为子组件提供一个指向这个嵌套表单的FormGroupDirective实例。所以下层的child-control还是会找到最上层的根表单指令。

解决方案 #

我们需要让child-group成为一个新的表单容器，为它的子组件提供自己的FormGroupDirective。具体修改如下：

1. 修改child-group.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormGroupDirective, ControlContainer } from '@angular/forms';

@Component({
  selector: 'child-group',
  template: `
    <!-- 绑定到嵌套的FormGroup，作为子组件的表单容器 -->
    <div [formGroup]="nestedForm">
      <ng-content></ng-content>
    </div>
  `,
  // 关键：向子组件提供当前的ControlContainer（即这个组件的FormGroupDirective）
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ChildGroupComponent implements OnInit {
  nestedForm!: FormGroup;

  constructor(private parentFormDir: FormGroupDirective) { }

  ngOnInit(): void {
    // 创建嵌套FormGroup并添加到父表单
    this.nestedForm = new FormGroup({});
    this.parentFormDir.form.addControl('group', this.nestedForm);
  }
}

2. 保持child-control.ts不变（逻辑无需修改）

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective } from '@angular/forms';

@Component({
  selector: 'child-control',
  template: `<input formControlName="testControl">`
})
export class ChildControlComponent implements OnInit {
  constructor(private parentFormDir: FormGroupDirective) { }

  ngOnInit(): void {
    // 现在注入的是child-group的FormGroupDirective，控件会加到嵌套的group里
    this.parentFormDir.form.addControl('testControl', new FormControl());
  }
}

为什么这样有效？ #

• 通过viewProviders，我们把child-group的FormGroupDirective作为ControlContainer提供给它的子组件，这样child-control在注入时会优先找到这个最近的指令实例。
• 使用viewProviders而非providers，可以确保这个服务只在child-group的视图层级生效，不会干扰父组件的其他子组件，避免依赖冲突。

这样修改后，最终的表单结构就会符合你的预期：

formGroup: { 
  group: { 
    testControl: FormControl(...) 
  } 
}

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