CODEWITHSUNDEEP
angularformsformarrayangular-dynamic-components
KGROZA
KGROZA

Reputation: 93

Dynamic component loader "formArrayName" Angular

I'm using Dynamic component loader to generate parts of form out of custom components. As I don't know up front how much of them will be, I've decided to use FormArray builder. Unfortunately it can be used only within parent FormGroup:

this.formBuilder.group({
    dynamicControls: this.formBuilder.array(this.getControls())
})

Thats leads me to use "formArrayName" directive but the problem is I also want to use my custom components without the parent generator-component. With that in mind I don't want to apply this directive in to each child, but rather to the parent:

    template: `
        <form [formGroup]="form">
            <section formArrayName="dynamicControls">
                <ng-template host></ng-template>
            </section>
        </form>
    `

But sadly, that did not worked. Dynamic loader uses ng-template with a host directive to render, and this cuses to unresolved "formControlName" in the child.

I've tried Angular v15 support of Directive composition API, but this directive is not stand-alone. I've also tried some hacky ng-templating in the child to conditionally remove a wrapper with directive tag, it failed. Next came up with an idea to code custom conditional formGroup but that requires I think putting it inside of angular build, as of not every dependency exist in dist make binding properly.

Any idea how we can use this components without the generator, and still keep cooperation generator component?

Upvotes: 0

Views: 198

Answers (1)

KGROZA
KGROZA

Reputation: 93

Ok. I'm answering myself I just have to use different viewProvider to the child

viewProviders: [{ provide: ControlContainer, useExisting: FormArrayName }]

Upvotes: 1

Related Questions