Angular - FormArray - «Не удается найти элемент управления с неопределенным атрибутом имени» - PullRequest
Новая
       14

Angular - FormArray - «Не удается найти элемент управления с неопределенным атрибутом имени»

5 голосов
/ 13 января 2020

Я пытался использовать реактивные формы в моем приложении. Но во время изменения компонентов я получил сообщение «Не удается найти элемент управления с неопределенным атрибутом имени».

Мой начальный код 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.

Заранее спасибо.

...