Подтвердить что ты не робот

Угловой 2: доступ к данным из FormArray

Я подготовил a от использования ReactiveForms, предоставляемых угловыми2/формами. Эта форма имеет форму массива:

this.checkoutFormGroup = this.fb.group({
            selectedNominee: ['', Validators.required],
            selectedBank: ['', Validators.required],
            products: productFormGroupArray
        });

productFormGroupArray - это массив объектов FormGroup Objects.I выбрал элементы управления, т.е. объект FormArray, используя это:

this.checkoutFormGroup.get('products')

Я пытаюсь получить элемент в массиве продуктов в индексе i. Как это можно сделать без перебора массива?

Редактировать:

Я пробовал с доступным методом (индекс):

this.checkoutFormGroup.get('products').at(index)

но это порождает ошибку:

Property 'at' does not exist on type 'AbstractControl'.

Редактировать 2: checkoutData и фонд получены с сервера.

this.checkoutData.products.forEach(product => {
                    this.fundFormGroupArray.push(this.fb.group({
                        investmentAmount: [this.fund.minInvestment, Validators.required],
                        selectedSubOption: ['', Validators.required],
                    }))
            });
4b9b3361

Ответ 1

Просто выделите этот элемент управления для массива

var arrayControl = this.checkoutFormGroup.get('products') as FormArray;

и все его особенности есть

var item = arrayControl.at(index);

Ответ 2

Один вкладыш в качестве опции к текущему принятому ответу

var item = (<FormArray>this.checkoutFormGroup.get('products')).at(index);

Ответ 3

//в файле.ts component//

getName(i) {
    return this.getControls()[i].value.name;
  }

  getControls() {
    return (<FormArray>this.categoryForm.get('categories')).controls;
  }

//в реактивной форме - файл шаблона //

<mat-tab-group formArrayName="categories" class="uk-width-2-3" [selectedIndex]="getControls().length">
      <mat-tab
        *ngFor="let categoryCtrl of getControls(); let i = index"
        [formGroupName]="i"
        [label]="getName(i)? getName(i) : 'جديد'"
      >
</mat-tab>
</mat-tab-group>