javascript - ERROR 错误：找不到具有名称的控件：'[object Object]

Question

我正在使用 Reactive Forms，我正在尝试将我的表单传递给子组件，但我遇到了上面的错误。最初在表单的顶层，我使用 FormArray 来保存我的表单，并且在我尝试将其传递给子组件之前工作正常。感谢这篇文章，我现在知道表单的顶层应该是 FormGroup，而 FormArray 应该是 FormGroup 的子级。

所以现在我将我的 FormArray 嵌套在 FormGroup 中，我得到了上面的错误。我不确定我做错了什么？下面在相关代码中。

// 父组件.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)
        })
    }
}

// 父 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>

// 子组件.ts

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

// 子 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>

标签： javascriptangularangular-reactive-forms