Angular 14: Programmatically created component that has NgControl as a dependency

Question

Trying to add a component to the DOM with ViewContainerRef createComponent. However, the component depends on NgControl. The end goal is to add components to a form using the FormBuilder.

Can't seem to wrap my head around dependency injection when it comes to NgControl.

Is there a way to set the formControlName when programmatically creating a component?

  createNgControlComponent() {
    // Add control to form group
    this.controlName++;
    this.formGroup.addControl(
      this.controlName.toString(),
      this.formBuilder.control('', [])
    );
    // Create component
    // ERROR Error: NG0201: No provider for NgControl found in NodeInjector.
    const componentRef = this.form.createComponent(
      CustomControlValueAccessorComponent
    );
    // componentRef.instance.controlDir = new FormControlName();
  }

DEMO: https://stackblitz.com/edit/angular-ivy-c739x6?file=src/app/app.component.ts

Prem · Accepted Answer · 2022-09-27 12:44:11Z

0

We can add a mediator component that will set the formControlName. I changed your code to work with a mediator. See if this helps - https://stackblitz.com/edit/angular-ivy-fz8rgo?file=src%2Fapp%2Fcustom-control-value-accessor%2Fcva-mediator.component.ts

answered Sep 27, 2022 at 12:44

Prem

161 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

bunchOfModelos Over a year ago

Brilliant! This will totally work for the use case. Final solution will implemented in this lib. github.com/Ba5ik7/ngx-editorjs/tree/main/projects/ngx-editorjs

Collectives™ on Stack Overflow

Angular 14: Programmatically created component that has NgControl as a dependency

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related