Forwarding formControlName to inner component in Angular

Question

I have one custom control component <some-input> that i wrapped to <ext-some-input>. SomeInput is encapsulated, has own API and supports reactive forms. ExtSomeInput is created as high-level wrapper over SomeInput.

I have following html:

<form [formGroup]="form">     <ext-some-input formControlName="name"> </form> 

and ExtSomeInput's html:

<some-input formControlName="_???_"></some-input> 

The question is how to forward formControlName to inner SomeInput component? I need to tie the form and inner formControl up. Is this possible?

EDITED:

I've created stackblitz project with this issue: here

Answer 1

Your inner component can take @Input controlName but it won't work out of the box:

Error: formControlName must be used with a parent formGroup directive.

In order to tie your control with parent FormGroup you can define viewProvider as follows:

import { Component, Input, OnInit} from '@angular/core'; ... import { ControlContainer, FormGroupDirective } from '@angular/forms';  @Component({   ...   viewProviders: [     {       provide: ControlContainer,       useExisting: FormGroupDirective     }   ] }) export class DateWrapperComponent implements OnInit {     @Input() controlName: string; } 

Forked Stackblitz

In case you don't know which exactly directive is provided as a ControlContainer(FormGroupDirective, FormGroupName or FormArrayName) you can use more generic approach:

viewProviders: [   {     provide: ControlContainer,     useFactory: (container: ControlContainer) => container,     deps: [[new SkipSelf(), ControlContainer]]   } ] 

Demo