formControlName in a children component

Like @MassimoVariolo's article mentions, you can pass the form as an input to the child component.

Parent component html:

<child-component [form]="form"></child-component>

Child component ts file:

@Input() public form: FormGroup;

Child component html (you need the div with the formGroup, otherwise you'll get an error):

<div [formGroup]="form">
    <input formControlName="myFormControlName"> 
</div>

You can consider reading this useful article: Using Child Components in Angular Forms

The core of the solution is to pass the formGroup instance to the child component and wrap it with the formGroup itself.

You need to implement control value accessor in your child component read more here https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

I know two ways how it's possible to implement this behavior, one was mentioned by Sofia in the answer above, the second approach is to pass formControl down to the child component!

Inside parent component HTML

<child-component
   [control]="parentForm.get('form-control-name-you-want-to-pass-down')">
</child-component>

Inside child-component

@Input() control: AbstractControl = new FormControl();

Inside child component HTML

<input [formControl]="control" />