如何让内容投影的表单控件正确注册到Angular组件内部的ngModelGroup中？

我明白你遇到的问题了——把ngModelGroup封装到组件里后，投影进来的输入框并没有正确归组到指定的分组下，反而直接挂在了根表单上。这确实是Angular内容投影的注入上下文特性导致的，下面我来分析原因并提供两种可行的解决方案：

问题原因 #

Angular的<ng-content>是内容投影，投影进来的DOM元素其实是在父组件的视图中编译和创建的，它们的依赖注入会从父组件的注入器开始查找。你之前在子组件的viewProviders中指定了ControlContainer复用父表单的NgForm，这就导致投影的输入框直接注册到了根表单，而不是子组件内部的ngModelGroup。

解决方案1：使用ngTemplateOutlet替代ng-content（推荐） #

这个方法的核心是把投影内容的渲染上下文切换到子组件内部，让输入框能找到子组件的ngModelGroup作为ControlContainer，稳定性和可读性都更好。

子组件代码修改 #

import { Component, Input, TemplateRef } from '@angular/core';
import { CommonModule, ControlContainer, NgModelGroup } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-component-with-the-ngmodelgroup-inside',
  template: `
    <div [ngModelGroup]="groupName" #group="ngModelGroup">
      <!-- 用ngTemplateOutlet渲染父组件传入的模板，上下文切换为子组件 -->
      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </div>
  `,
  imports: [CommonModule, FormsModule],
  standalone: true,
  viewProviders: [
    // 让子组件内部的ControlContainer指向当前的ngModelGroup
    { provide: ControlContainer, useExisting: NgModelGroup }
  ],
})
export class ComponentWithNgModelGroupComponent {
  @Input() groupName: string = '';
  // 接收父组件传入的内容模板
  @Input() contentTemplate!: TemplateRef<any>;
}

父组件使用方式 #

<form #form="ngForm">
  <app-component-with-the-ngmodelgroup-inside 
    groupName="personalInfo" 
    [contentTemplate]="personalInfoTemplate"
  ></app-component-with-the-ngmodelgroup-inside>

  <!-- 把需要投影的内容放在ng-template中 -->
  <ng-template #personalInfoTemplate>
    <input type="text" ngModel name="firstName">
    <input type="text" ngModel name="lastName">
  </ng-template>
</form>

<pre>{{ form.value | json }}</pre>

解决方案2：调整注入器上下文（进阶，兼容ng-content） #

如果你一定要保留<ng-content>的使用方式，可以通过动态提供ControlContainer的方式，让投影的输入框找到子组件内部的ngModelGroup。

子组件代码修改 #

import { Component, Input, Injector, ViewChild, NgModelGroup } from '@angular/core';
import { CommonModule, ControlContainer } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-component-with-the-ngmodelgroup-inside',
  template: `
    <div [ngModelGroup]="groupName" #group="ngModelGroup">
      <ng-content></ng-content>
    </div>
  `,
  imports: [CommonModule, FormsModule],
  standalone: true,
  viewProviders: [
    {
      provide: ControlContainer,
      useFactory: (injector: Injector) => {
        // 从子组件注入器中动态获取当前的NgModelGroup
        return injector.get(NgModelGroup);
      },
      deps: [Injector]
    }
  ],
})
export class ComponentWithNgModelGroupComponent {
  @Input() groupName: string = '';
  @ViewChild(NgModelGroup) group!: NgModelGroup;
}

父组件使用方式（保持不变） #

<form #form="ngForm">
  <app-component-with-the-ngmodelgroup-inside groupName="personalInfo">
    <input type="text" ngModel name="firstName">
    <input type="text" ngModel name="lastName">
  </app-component-with-the-ngmodelgroup-inside>
</form>

<pre>{{ form.value | json }}</pre>

验证结果 #

无论使用哪种方案，你最终都会得到预期的表单值结构：

{
  "personalInfo": {
    "firstName": "",
    "lastName": ""
  }
}

内容来源于stack exchange