Angular中使用ng-container和ng-template时动态表单无法正常工作

这个问题的核心是Angular ng-template生成的嵌入视图，依赖注入查找逻辑和普通DOM元素的视图层级逻辑不一致：

• 用普通div包裹表单内容时，所有带formControlName的控件会顺着当前组件的视图树向上查找父级，能正常定位到外层[formGroup]绑定的FormGroupDirective实例，因此表单可以正常运行。
• 用ng-container + ngTemplateOutlet渲染抽离的表单模板时，嵌入视图默认从模板声明的位置开始向上查找依赖，而非从模板被实际插入渲染的位置查找。如果你把[formGroup]绑定在挂载ngTemplateOutlet的外层容器上，但抽离的ng-template本身声明在和该外层容器平级、甚至更外层的位置，模板内的formControlName向上查找时无法定位到FormGroupDirective实例，会直接触发“formControlName必须使用父级formGroup指令”的报错，表单自然无法正常工作。
• 补充说明：*ngFor、*ngIf这类结构指令虽然底层也基于ng-template实现，但它们的模板是直接声明在当前宿主元素内部，声明位置本身就在[formGroup]的子层级，因此不会出现依赖查找失败的问题。

可根据业务场景选择以下任意一种方案修复：

方案1：将formGroup绑定移入模板内部 #

把[formGroup]指令直接绑定到ng-template内部的根元素上，保证表单控件查找依赖时，能在模板自身的视图层级内找到父级FormGroup实例，示例代码：

<!-- 外层只负责传入表单实例、渲染模板 -->
<ng-container [ngTemplateOutlet]="formTpl" [ngTemplateOutletContext]="{ form: myForm }"></ng-container>

<!-- 模板内部绑定formGroup，包裹所有表单控件 -->
<ng-template #formTpl let-form="form">
  <div [formGroup]="form">
    <input formControlName="username" />
    <input formControlName="email" />
    <!-- 其余动态表单字段 -->
  </div>
</ng-template>

这个方案改造成本最低，不需要额外编写逻辑，是日常开发中最常用的可复用表单模板写法。

方案2：显式给ngTemplateOutlet传递自定义注入器 #

如果你必须把[formGroup]放在外层容器上，可以在渲染模板时，通过ngTemplateOutletInjector传入自定义注入器，把外层的FormGroupDirective实例加入注入树，让模板内的控件可以正常找到依赖，示例代码：

// 组件类中引入依赖
import { FormGroupDirective } from '@angular/forms';
import { Injector } from '@angular/core';

export class DynamicFormComponent {
  @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective;
  constructor(private injector: Injector) {}

  // 创建包含FormGroupDirective的自定义注入器
  get templateInjector(): Injector {
    return Injector.create({
      providers: [
        { provide: FormGroupDirective, useValue: this.formGroupDir }
      ],
      parent: this.injector
    });
  }
}

<!-- 外层绑定formGroup，渲染模板时传入自定义注入器 -->
<div [formGroup]="myForm">
  <ng-container 
    [ngTemplateOutlet]="formFieldTpl"
    [ngTemplateOutletInjector]="templateInjector"
  ></ng-container>
</div>

<ng-template #formFieldTpl>
  <input formControlName="username" />
  <input formControlName="email" />
</ng-template>

这个方案适合模板需要在多个不同FormGroup场景下复用、且不方便修改模板内部结构的场景。

方案3：避免抽离跨层级的表单模板 #

如果表单复用逻辑不复杂，可以直接把表单字段模板声明在[formGroup]容器内部，此时模板声明位置本身就在FormGroup的子层级，依赖查找不会出现异常，示例：

<div [formGroup]="myForm">
  <!-- 模板直接声明在formGroup容器内部 -->
  <ng-template #formFieldTpl>
    <input formControlName="username" />
    <input formControlName="email" />
  </ng-template>

  <!-- 同层级内渲染模板，依赖可正常查找 -->
  <ng-container [ngTemplateOutlet]="formFieldTpl"></ng-container>
</div>

这个方案适合复用范围仅在当前FormGroup容器内部的场景，不需要额外传参或者编写注入逻辑，实现成本最低。

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