Using a control of parent formgroup inside nested formgroupname

Question

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

Answer 1

"parentControl" not belong to ChildGroup

1. A workAround is use a getter

   get parentControl1():FormControl { return this.parentForm.get('parentControl1') as FormControl }

   And use [formControl]

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

2. Another workaround is use some like

   <div formGroupName="childGroup"> <input type="text" formControlName="childControl1"> <input type="text" [ngModel]="this.parentForm.get('parentControl1').value" (ngModelChange)="this.parentForm.get('parentControl1').setValue($event)" [ngModelOptions]="{standalone:true}"> <input type="text" formControlName="childControl2"> </div>