How to get it to work with dynamic controls

[muuvmuuv]

I am developing a "Form Module" for our companies CI and started using ngneat tools for their simplicity. Unfortunately, I cannot get the error tailor work for a control that is generated through a high order component.

Our form component takes a nested object with sections where each section can have fields, those are later looped and through a type property a specific field renders to the UI. Each field generates its own controls to easier apply our own options to it.

I have started this in a private repo of mine, if someone wants to have a look I can add him as a member for some time: https://github.com/muuvmuuv/angular-dynamic-typed-form

TLDR

The below code would be in one field component nested inside a section component which is inside our form component that takes that nested object.

This works:

<ng-container [formGroup]="group">
  <-- Added manually to the top-level form group -->
  <ion-input type="text" formControlName="test" autocomplete="off" [controlErrorAnchor]="nameError"></ion-input>

  <ng-template controlErrorAnchor #nameError="controlErrorAnchor"></ng-template>
</ng-container>

This not:

<ng-container [formGroup]="group">
  <ion-input [type]="config.type"
             [formControlName]="config.name"
             [controlErrorAnchor]="nameError">
  </ion-input>

  <ng-template controlErrorAnchor #nameError="controlErrorAnchor"></ng-template>
</ng-container>

[NetanelBasal]

I'll need to get a basic reproduction so that I could investigate it.

[muuvmuuv]

Granted you access :)

[muuvmuuv]

Maybe you had no time yet, no hurry, but here some instructions:

1. clone
2. npm i
3. npm start
4. adding new control: src/app/form/components/field/field.component.ts#L59
5. remove text in first input (which is required)
6. press submit

[muuvmuuv]

It just... went away. I have no idea how. Just cloned it on another machine for copying it into a project and haven't seen the error happening again.