Cannot find control with name: '0'?

Question

Angular

My form:

this.formGroup = this.fb.group({ list: this.fb.array([]) });

Adding a new control:

private addControl(): void {
        (<FormArray>this.formGroup.controls['list']).push(new FormControl());
    }

Usage:

<form [formGroup]="formGroup" class="dialog_form" autocomplete="off">
        <div class="dialog_form__row" formArrayName="list">
            <app-dropdown-list-children
                *ngFor="let dropdown of formGroup.get('list')['controls']; let i = index"
                [controlIndex]="i"
                [parentFormGroup]="formGroup"
            ></app-dropdown-list-children>
</form>

The app-dropdown-list-children component :

<div [formGroup]="parentFormGroup">
<div class="dropdown" [formGroupName]="controlIndex">
</div>
</div>

After loading the component, a control is created:

this.addControl();

Why am I getting an error:

Cannot find control with name: '0'?

If you replace it with the template code, then everything works:

<form [formGroup]="formGroup" class="dialog_form" autocomplete="off">
        <div class="dialog_form__row" formArrayName="list">
            <input type="text" [formControlName]="i" *ngFor="let dropdown of formGroup.get('list')['controls']; let i = index" /
        </div>
    </form>

Answer 1

Well, it turns out that inside the app-dropdown-list-children it looks for a control with the name 0 in the formGroup, and there is no such control, in the formGroup there is only a control with the name list, xs maybe you can not specify the formGroup inside this component, just throw the control , and specify it via [formControl]="control", not via index