ERROR Error: Cannot find control with name: '[

Question

I'm working with Reactive Forms and I'm trying to pass my form down to child components, but I'm running into the error above. Initially at the top level of the form I was using a FormArray to hold my form and that was working fine before I tried passing it down to the child components. Thanks to this post I now know that the top level of a form should be a FormGroup and the FormArray should be a child of the FormGroup.

So now I am nesting my FormArray inside of a FormGroup and I'm getting the error above. I'm not sure what I'm doing wrong? Below in the relevant code.

// Parent component.ts

ngOnInit() {
    if (!!this.rows) {

        this.tableForm = new FormArray([]);

        this.rows.forEach((row) => {
            this.rowGroup = new FormGroup({})
            this.columns.forEach(column => {
                this.rowGroup.addControl(column.key, new FormControl(row[column.key]));
            });
            this.tableForm.push(this.rowGroup);
        })

        this.tableGroup = new FormGroup({
            rows: new FormControl(this.tableForm)
        })
    }
}

// Parent HTML

<section
    *ngIf="!!modal"
    class="modal__mask">
    <section
        class="modal__container"
        #carousel
        [ngStyle]="{'left': start + 'px'}"
        (window:resize)="onResize($event)"
        [formGroup]="tableGroup">

        <div
            *ngFor='let row of selectedRows; let i = index'
            class="modal modal__large"
            [formArrayName]="rows">
            <div
                [formGroupName]="i"
                [ngClass]="{'opacity': modalPage !== i}">
                <div class="modal__header modal__header--large">
                    <h6>Edit Employee Details</h6>
                </div>
                <div class="u-flex u-wrap">
                    <div
                        class="u-flex modal__body"
                        style="width: 50%"
                        *ngFor="let column of columns">
                        <div
                            *ngIf="column.label"
                            class="input__wrapper"
                            [ngClass]="{'input__wrapper--inline': layout === 'horizontal'}">
                            <z-input
                                *ngIf="column.label"
                                class="u-maxX"
                                [group]="tableGroup"
                                [config]="column"> 
                            </z-input>

                            <!-- <div>
                                    <label
                                        class="input__label">
                                        <p class="t-bold t-data">{{column.label}}</p>
                                    </label>
                                    <div class="z-input__default">
                                        <input
                                            class="input u-maxX"
                                         [formControlName]="column.key"
                                            [value]="row[column.key]">
                                    </div>
                                </div> -->

                        </div>
                    </div>
                    <section class="modal__footer u-fillRemaining">
                        <div class="u-flex">
                            <button
                                class="button button--medium"
                                (click)="nextSelectedRow()">
                                <div class="button__content">
                                    <i
                                        class="icon icon--medium"
                                        *ngIf="!!icon">
                                        {{icon}}
                                    </i>
                                    <span>Skip</span>
                                </div>
                            </button>
                        </div>
                        <div class="u-flex">
                            <button
                                class="button button--low"
                                (click)="reset(row, i)">
                                <div class="button__content">
                                    <i
                                        class="icon icon--medium"
                                        *ngIf="!!icon">
                                        {{icon}}
                                    </i>
                                    <span>Reset</span>
                                </div>
                            </button>
                            <button
                                class="button button--low"
                                (click)="saveChanges(row, i)">
                                <div class="button__content">
                                    <i
                                        class="icon icon--medium"
                                        *ngIf="!!icon">
                                        {{icon}}
                                    </i>
                                    <span>Save Changes</span>
                                </div>
                            </button>
                        </div>
                    </section>
                </div>
            </div>
        </div>

// Child component.ts

@Input() config;
@Input() group: FormGroup;
@Input() view: string;
@Input() layout: string;

// Child HTML

<div
    class="input__wrapper"
    [ngClass]="{'input__wrapper--inline': layout === 'horizontal'}"
    [formGroup]="group"
    [ngSwitch]="config.type">
    <label
        class="input__label"
        *ngIf="!!config.label">
        <p class="t-bold t-data">{{config.label}}</p>
    </label>

    <z-select
        *ngSwitchCase="'select'"
        [config]="config"
        [group]="group"
        [view]="view"
        gridColumn="1 / 5">
    </z-select>

    <div class="z-input__default">
        <input
            *ngSwitchDefault
            class="input u-maxX"
            [formControlName]="config.key"
            [attr.type]="config.type"
            [attr.placeholder]="config.placeholder">
    </div>