Angular通用列表组件动态表单控件：FormControlName注册问题

方案一：自定义无@Host()限制的FormControlName指令 #

这是最适配模板/投影场景的方案，核心是复刻原生FormControlName的逻辑，移除构造器中的@Host()装饰器，让指令能向上遍历整个组件树查找ControlContainer，而非仅局限于宿主组件范围。

实现步骤： #

1. 创建自定义指令CustomFormControlName，继承原生控件类并调整注入逻辑：

import { Directive, Input, Optional, SkipSelf } from '@angular/core';
import { FormControlName, ControlContainer, NgControl, FormGroupDirective } from '@angular/forms';

@Directive({
  selector: '[customFormControlName]',
  providers: [{ provide: NgControl, useExisting: CustomFormControlName }]
})
export class CustomFormControlName extends FormControlName {
  constructor(
    @Optional() @SkipSelf() parent: ControlContainer,
    @Optional() private _formGroupDirective: FormGroupDirective
  ) {
    super(parent, _formGroupDirective);
  }

  @Input('customFormControlName')
  override set name(value: string | number | null) {
    super.name = value;
  }
}

• 关键改动：移除原生构造器的@Host()装饰器，改用@SkipSelf()让Angular向上遍历完整组件树定位父ControlContainer。

2. 在模块中声明并导出该指令，之后在动态模板中替换原生指令：

<ng-template let-control>
  <input [customFormControlName]="control.name" [ngClass]="customThemeClass">
</ng-template>

方案二：手动传递ControlContainer到ng-template #

若不想新增指令，可通过模板上下文手动传递父容器，在模板内直接关联表单控件：

实现步骤： #

1. 在通用列表组件中注入并暴露ControlContainer：

import { Component, Input } from '@angular/core';
import { ControlContainer } from '@angular/forms';

@Component({
  selector: 'app-generic-list',
  template: `
    <div *ngFor="let item of listItems; let i = index">
      <ng-template 
        [ngTemplateOutlet]="itemTemplate"
        [ngTemplateOutletContext]="{ $implicit: item, parentContainer: controlContainer }"
      ></ng-template>
    </div>
  `
})
export class GenericListComponent {
  @Input() listItems: any[];
  @Input() itemTemplate: any;

  constructor(public controlContainer: ControlContainer) {}
}

2. 在父组件模板中，利用上下文传递的容器手动绑定控件：

<form [formGroup]="parentForm">
  <app-generic-list 
    [listItems]="formFields"
    [itemTemplate]="fieldTemplate"
  ></app-generic-list>
</form>

<ng-template #fieldTemplate let-field let-parentContainer="parentContainer">
  <input 
    [formControl]="parentContainer.control.get(field.name)"
    [ngClass]="customThemeClass"
  >
</ng-template>

方案对比 #

• 自定义指令方案：一劳永逸，完全兼容原生FormControlName的使用习惯，适合通用型组件或复杂表单场景，无需额外上下文传递逻辑。
• 手动传递容器方案：无需新增指令，但需手动管理控件与表单的关联，代码冗余度较高，适合小型项目或临时场景。

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