Connecting parent component 'formGroup' with child component 'formControlName'

Linking Parent-Component-FormGroup-with-Child-Component-FormControlName

Connecting parent component 'formGroup' with child component 'formControlName'


In the Parent component template
================================

<form [formGroup]="recipeForm">
<app-recipe-name [parent]="recipeForm"></app-recipe-name>
</form>

In the Child component, under the class add
===========================================
  @Input() parent: FormGroup;

In the Child component template
===============================
			<mat-input-container fxFill [formGroup]="parent">
				<input matInput placeholder="Recipe Name" [matAutocomplete]="recipeAutocomplete" formControlName="recipeName">
			</mat-input-container>

Now 'recipeName' is accessible from parent
Ref URL: https://toddmotto.com/component-architecture-reactive-forms-angular