web-dev-qa-db-fra.com

Angular 2: Accès aux données depuis FormArray

J'ai préparé un en utilisant ReactiveForms fourni par angular2/forms. Ce formulaire comporte un tableau de produits:

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

productFormGroupArray est un tableau d'objets FormGroup. J'ai extrait les contrôles, par exemple, l'objet FormArray en utilisant ceci:

this.checkoutFormGroup.get('products')

J'essaie d'obtenir l'élément dans le tableau products à l'index i. Comment cela peut-il être fait sans passer en boucle dans le tableau?

Modifier:

J'ai essayé avec la méthode at (index) disponible:

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

mais cela génère une erreur en tant que:

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

Edit 2: CheckoutLes données et le fonds sont reçus du serveur.

this.checkoutData.products.forEach(product => {
                    this.fundFormGroupArray.Push(this.fb.group({
                        investmentAmount: [this.fund.minInvestment, Validators.required],
                        selectedSubOption: ['', Validators.required],
                    }))
            });
angulartypescriptangular2-forms
16
Sumit Agarwal

Il suffit de lancer ce contrôle dans un tableau

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

et toutes ses caractéristiques sont là

var item = arrayControl.at(index);
27
Radim Köhler

Un liner en option pour la réponse acceptée actuellement 

(<FormArray>this.checkoutFormGroup.get('products')).at(index);
2
fg78nc

// dans le fichier de composant .ts //

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

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

// sous forme réactive - Fichier de modèle //

<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>
0
Issa Lafi