Перебирать объект массива реактивной формы в ngFor - PullRequest
Новая
       11

Перебирать объект массива реактивной формы в ngFor

0 голосов
/ 28 мая 2018

Я столкнулся со странной проблемой с угловыми реактивными формами в Angular v6.
Я использовал массивы форм в angular v1.2, v1.6 и v1.7.Недавно я обновил свой CLI до последней версии Angular CLI v6.0.5.

Этот же исходный код прекрасно работает в предыдущей версии, но не в последней CLI.

Ошибка, которую яполучить следующее:

Невозможно найти другой поддерживающий объект '[объект объекта]' типа 'объект'.NgFor поддерживает только привязку к Iterables, таким как массивы.

Сам объект выглядит так: 

createForm(): void {
    this.mainForm = this.formBuilder.group({
        itemRows: this.formBuilder.array([
             this.initForm()
         ])
    });
}

initForm(): FormGroup {
    return this.formBuilder.group({
        item1: ['', [Validators.required]]
        // other form controls created here.
    })
}

Angular жалуется, что this.mainForm.controls.itemRows не может быть повторен.Однако обратите внимание, что this.mainForm.controls.itemRows является формой массив .

Ошибка отображается в этой строке в представлении: 

<form [formGroup]="mainForm">
    <div formArrayName="itemRows"> <!-- Problem here in v6 -->
        <div *ngFor="let itemRow of mainForm.controls.itemRows">
            <!-- rest of the form -->
        </div>
    </div>
</form>

Я нашел рекомендации ( link1 ) ( link2 ) ( link3 ), которые предлагают создать массив из объекта, но он не выглядит чистымдля меня, особенно когда имеешь дело со сложными объектами, такими как реактивные формы.Кто-нибудь сталкивался с этой проблемой с последним CLI?

Кроме того, зачем менять то, что раньше работало идеально?Просто говорю.

1 Ответ

0 голосов
/ 28 мая 2018

itemRows - это объект.

Он может повторяться следующим образом 

<div *ngFor="let itemRow of mainForm.controls.itemRows.controls">
...