Angular 追加到FormGroupDirective的指令[]

当前

FormGroupDirective.directives

仅显示

NgControl

指令扩展， 以下是如何将

FormControlName

附加到动态创建的组件的答案

export class DynamicPanelDirective extends NgControl implements OnInit  {

  _control: FormControl;

  constructor(
    @Optional() @Host() @SkipSelf() private parent: ControlContainer,
    private resolver: ComponentFactoryResolver,
    private container: ViewContainerRef) {
    super();
  }

  ngOnInit() {
    let component = this.resolver.resolveComponentFactory<GeneralPanelComponent>(GeneralPanelComponent);
    this.name = 'general';
    this.component = this.container.createComponent(component);
    this.valueAccessor = this.component.instance;
    this._control = this.formDirective.addControl(this);
  }
  ...
}

这很好

下一步是扩展

NgModelGroup

，将

formGroupName

附加到动态创建的组，然后将控件附加到它们的宿主组

我遵循了这个模式，并在

NgModelGroup

的帮助下将其扩展到另一个指令-

DynamicGroupDirective

directives: Array(2)
0: DynamicPanelDirective {_parent: null, name: "input", valueAccessor: InputComponent, _rawValidators: Array(0), _rawAsyncValidators: Array(0), …}
1: DynamicPanelDirective {_parent: null, name: "select", valueAccessor: SelectComponent, _rawValidators: Array(0), _rawAsyncValidators: Array(0), …}

export class DynamicGroupDirective extends NgModelGroup implements OnInit, OnDestroy {
  @Input() config: GroupControlConfig;
  component: ComponentRef<any>;

  constructor(
    @Host() @SkipSelf() private parent: ControlContainer,
    @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[],
    @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[],
    private resolver: ComponentFactoryResolver,
    private container: ViewContainerRef
  ) {
    super(parent, validators, asyncValidators);
  }

  ngOnInit(): void {
    this.name = this.config.name;
    const factory = this.resolver.resolveComponentFactory<any>(component);
    component = this.container.createComponent(factory);
  }

  get path(): string[] {
    return [...this.config.breadcrumbs !, this.name];
  }

我知道我必须使用

DynamicGroupDirective

中的匹配函数，即

this.parent.formDirective.addFormGroup(this);

但是我不明白我需要在中分配什么，因为它本身并没有添加到指令数组中，而且我不能分配给

this.control

，因为它标记为

只读

用例是使用有助于将动态组件附加到组的

config.breadcrumbs

访问正确的

DynamicGroupDirective

，但我还需要在其正确的组中呈现动态组件本身

ViewContainerRef

所以也许有人有更好的建议。。 感谢所有读过这篇文章的人

this.parent.formDirective.addFormGroup(this);