Helper to "compose" Reactive forms from different component -> use viewProviders: [provideControlContainer()],

provideControlContainer.ts

//ORIGINAL CODE BY Nevzat Topçu @nevzatopcu
//STACKBLIZ SAMPLE https://stackblitz.com/edit/angular-form-share-elements?file=src%2Fmain.ts
//READ MORE HERE: https://nevzatopcu.medium.com/angular-child-components-with-reactive-forms-fbf4563b304c

import { Optional, SkipSelf, Provider } from '@angular/core';
import { ControlContainer } from '@angular/forms';

const containerFactory = (container: ControlContainer): ControlContainer => {
  if (!container) {
    throw new Error('I need a FormGroup instance');
  }
  return container;
};

function provideControlContainer(): Provider[] {
  return [
    {
      provide: ControlContainer,
      deps: [[new SkipSelf(), new Optional(), ControlContainer]],
      useFactory: containerFactory,
    },
  ];
}