Error: Cannot find control with path: 'FormArray -> FormControlName' Angular 2+

[Aakash Goplani]

This is the structure of my form:

this.formData = new FormGroup({ selectedAnimal: new FormArray([], [Validators.required]), selectedTransport: new FormArray([], [Validators.required]), roadName: new FormControl({ disabled: true, value: null }, Validators.required), roadZip: new FormControl({ disabled: true, value: null }, Validators.required), planeName: new FormControl({ disabled: true, value: null }, Validators.required), planeZip: new FormControl({ disabled: true, value: null }, Validators.required) });

Corresponding HTML

<form [formGroup]="formData" (ngSubmit)="onSubmit()"> <div class="animal-checkbox-group" formArrayName="selectedAnimal"> <!-- multiple checkbox options, selecting one is mandatory --> </div> <div class="animal-checkbox-group" formArrayName="selectedTransport"> <!-- multiple checkbox options, selecting one is mandatory --> <div class="if-checkbox-1-selected"> <!-- conditional checkbox: if checkbox is selected -> new new form controls -> they should be defined for successful validation --> <input type="text" formControlName="roadName"> </div> </div> </form>

ERROR:

ERROR Error: Cannot find control with path: 'selectedTransport -> roadName'

stackblitz working example