добавление к директивам [] FormGroupDirective - PullRequest
Новая
       50

добавление к директивам [] FormGroupDirective

1 голос
/ 31 октября 2019

в настоящее время FormGroupDirective.directives показывает только NgControl расширения директивы, реализованные после этого SOF-ответа о том, как прикрепить 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);
  }
  ...
}

При ведении журнала this.parent.formDirective.directives я получаю массив всех DynamicPanelDirective s, прикрепленных к FormGroupDirective

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), …}

Это здорово.

Следующим шагом было расширение NgModelGroup доприсоедините formGroupName к динамически создаваемым группам, а затем прикрепите элементы управления к их группам хостов

Я следовал шаблону, которому также помог этот вклад в выпуск github и расширил NgModelGroup на другую директиву- DynamicGroupDirective

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.directives, только DynamicPanelDirectives.

Я заметил, что директивы добавляются из-за этого добавления: 

// dynamic-panel.directive.ts ~ ngOnInit()
this._control = this.formDirective.addControl(this);

И я понимаю, что должен использовать функцию сопоставления в DynamicGroupDirective, то есть 

this.parent.formDirective.addFormGroup(this);

Но я не понимаючто мне нужно назначить, так как он не добавляется в массив директив сам по себе, и я не могу присвоить this.control, так как он помечен readonly

Вариант использования - для доступа к правильному DynamicGroupDirective с использованием config.breadcrumbs, который помогает присоединить его к группе, но мне также нужно, чтобы сам динамический компонент отображался внутри соответствующей группы ViewContainerRef

ТАК, может, у кого-то есть лучшее предложение ... СпасибоВы для тех, кто прочитал это далеко

...