Using a control of parent formgroup inside nested formgroupname

I am creating a form where I am using formgroupname inside a formgroup.

Html:

<form [formGroup]="parentForm">
<div formGroupName="childGroup">
<input type="text" formControlName="childControl1">
<input type="text" formControlName="parentControl1">
<input type="text" formControlName="childControl2">
</div>
</form>


Ts Code

this.parentForm = this.formBuilder.group({
parentControl1: new FormControl(),
childGroup: this.formBuilder.group({
childControl1: new FormControl(),
childControl2: new FormControl(),
})
})


I am getting following error.

Error: Cannot find control with path: 'childGroup -> parentControl1'

Note: I can't change html structure. Need a workaround of can I achieve this

Continue reading...