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

Like a charm, thanks!

when the parent form is disabled for editing, its not reflecting on child component

i did the exactly same as you but i am getting null value on submitting the form

i face the same issue. parent form only get the value when we change in child control. unable to get initial value. you can see age value not update the form value. https://stackblitz.com/edit/reactive-form-with-child-component?file=app%2Fmy-form-father%2Fmy-form-father.component.ts

How amazing is this, watched a 10 min tutorial, no success, but here in 20 lines I found the references what I need.