如何在TypeScript中编程式为Angular动态组件添加formControl

可以实现，只需要手动将FormControl和你动态创建的、已实现ControlValueAccessor的组件实例做双向绑定即可，具体操作步骤如下：

步骤1：改造自定义组件加载指令 #

你需要在myCustomComponentDirective中暴露动态创建出来的自定义组件实例，方便父组件获取：

import { Directive, ViewContainerRef, ComponentFactoryResolver, OnInit } from '@angular/core';
// 替换为你自己的自定义组件类
import { YourCustomComponent } from './your-custom-component.component';

@Directive({
  selector: '[myCustomComponentDirective]'
})
export class MyCustomComponentDirective implements OnInit {
  // 对外暴露创建完成的组件实例
  public customComponent: YourCustomComponent;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    // 保留你原有动态创建组件的逻辑
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourCustomComponent);
    const componentRef = this.viewContainerRef.createComponent(componentFactory);
    this.customComponent = componentRef.instance;
  }
}

步骤2：修改父组件逻辑完成绑定 #

首先修正你原有代码中获取实例的错误，不要查询TemplateRef，直接查询指令实例，再完成FormControl和组件的双向同步：

import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { MyCustomComponentDirective } from './my-custom-component.directive';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'custom',
  templateUrl: './component.html',
})
export class Component implements AfterViewInit, OnDestroy {
  formGroup: FormGroup;
  formConfigs = []; // 保留你原有表单配置
  private destroy$ = new Subject<void>();

  // 直接查询自定义指令实例，而非TemplateRef
  @ViewChild(MyCustomComponentDirective) private customComponentDir: MyCustomComponentDirective;

  ngAfterViewInit() {
    // 等待组件创建完成后执行绑定
    if(this.customComponentDir?.customComponent) {
      this.bindCustomControl();
    }
  }

  private bindCustomControl() {
    const customComp = this.customComponentDir.customComponent;
    // 替换为你自定义控件对应的controlName
    const control = this.formGroup.get('customControlName') as FormControl;
    if(!control) return;

    // 1. 同步初始值到自定义组件
    customComp.writeValue(control.value);

    // 2. 自定义组件值变更时同步到FormControl
    customComp.registerOnChange((val: any) => {
      control.setValue(val, { emitEvent: false });
    });

    // 3. 自定义组件触发touched状态时同步到FormControl
    customComp.registerOnTouched(() => {
      control.markAsTouched();
    });

    // 4. 同步禁用状态（如果你的组件实现了setDisabledState方法）
    if(customComp.setDisabledState) {
      customComp.setDisabledState(control.disabled);
      control.statusChanges
        .pipe(takeUntil(this.destroy$))
        .subscribe(status => {
          customComp.setDisabledState(status === 'DISABLED');
        });
    }

    // 5. FormControl值变更时同步到自定义组件
    control.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(val => {
        customComp.writeValue(val);
      });
  }

  ngOnDestroy() {
    // 销毁订阅避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

注意事项 #

• 如果是循环生成多个自定义控件，需要用@ViewChildren(MyCustomComponentDirective)获取所有指令实例，遍历对应每个配置项的controlName逐个绑定
• 你的自定义组件必须完整实现ControlValueAccessor接口，所有必要方法均已实现才能正常完成绑定
• 你现有模板中input的formControlName写法有误，需要改为[formControlName]="singleForm.controlName"，否则会将属性值当做固定字符串处理，同时注意拼写错误conrolName应为controlName

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