динамически назначать динамически созданный компонент в formGroup - PullRequest
Новая
       39

динамически назначать динамически созданный компонент в formGroup

0 голосов
/ 23 октября 2019

Попытка создать динамическую форму на основе файла конфигурации.

Ингредиенты:

  • Пользовательские элементы управления формы (реализация ControlValueAccessor)
  • ComponentFactoryResolver
  • ReactiveFormsModule

app.component.html

<form [formGroup]="form" (ngSubmit)="submit()">
  <my-custom-input formControlName="x"></my-custom-input> <!-- working example -->
  <ng-container #container></ng-container>
  <button type="submit">Submit</button>
</form>

formGroup после анализа входных данных из файла конфигурации: {a: null, b: null, x: null}. x является ручным, a и b являются динамическими.

app.component.ts

createComponent(config: FormControlConfig) {
  const factory = this.resolver.resolveComponentFactory(components[config.type]);
  const componentRef = this.container.createComponent(factory);
  componentRef.instance.config = config;

  // below is the current attempt. thought to mimic the attributes as they appear in the DOM. 
  this.renderer.setAttribute(componentRef.location.nativeElement, 'formControlName', config.name);
  this.renderer.setAttribute(componentRef.location.nativeElement, 'ng-reflect-name', config.name);
  // which is a no-go.
}

конечно, после заполнения значений чем-либо, что я получаю

{a: null, b: null, x: 'whatever'};

Я также прочитал эту статью , которая, кажется, охватывает проблему e2e. Но для каждого из них требуется компонент-обертка.

Я надеялся на еще более тонкое решение.

Я с удовольствием разработаю еще какой-нибудь код, если потребуется

...