Angular-FormArray-“找不到具有未指定名称属性的控件”

Question

我尝试在应用程序中使用反应形式。但是在更改组件期间，出现“找不到具有未指定名称属性的控件”错误。

我最初的TypeScript代码是：

    onElementChange(): void {
        this.activeData = this.getActiveData();
        if (!this.activeData.isInitialized) {
            this.activeData.filteredOptions = [];
            this.activeData.formArray = new FormArray(this.activeData.zipElement.dimensionElements.map(() => {
                const formControl = new FormControl();
                this.activeData.filteredOptions.push(formControl.valueChanges.pipe(
                    startWith(''),
                    map((value: string | DimensionElement) => this.filter(value))
                ));
                return formControl;
            }));
            this.setMatchedElements();
            this.activeData.isInitialized = true;
        }
    }

HTML代码是：

<cdk-virtual-scroll-viewport itemSize="36" id="scroll-container">
    <li
        *cdkVirtualFor="let element of getActiveData().zipElement.dimensionElements; let index = index"
        [ngClass]="{ 'gray-row': index % 2 === 1 }"
        class="dimension-element-item"
    >
        <div>
            <span [matTooltip]="element.name" matTooltipPosition="above">
                {{ element.name }}
            </span>
        </div>
        <oc-drop-down
            [containerGridClass]="'drop-down-grid'"
            [content]="actions"
            [selectedValue]="element.action"
            (selectedValueChange)="actionChange($event, element, index)"
        >
        </oc-drop-down>
        <mat-form-field floatLabel="never">
            <input
                [placeholder]="translate('import_manual_search')"
                aria-label="dimension"
                matInput
                [matAutocomplete]="auto"
                [readonly]="isIgnoreAction(element.action)"
                [formControl]="getFormControl(index)"
            >
            <mat-autocomplete
                #auto="matAutocomplete"
                [displayWith]="valueMapper"
                (optionSelected)="selectElement($event, element)"
            >
                <mat-option *ngFor="let option of getActiveData().filteredOptions[index] | async" [value]="option">
                    {{ option.name }}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>
    </li>
</cdk-virtual-scroll-viewport>

我还认为该代码将很有用：

    getFormControl(index: number): AbstractControl {
        return this.activeData.formArray.at(index);
    }

我有一个称为活动数据的东西，因为输入和下拉列表的反应形式对于所有元素都是不同的。

我对反应形式很陌生，所以我不知道我是否正确使用了FormControl。

谢谢。