web-dev-qa-db-ja.com

Angular 2：FormArrayからデータにアクセスする

Angle2/formsが提供するReactiveFormsを使用してを準備しました。このフォームには、フォームアレイ製品があります。

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

productFormGroupArrayはFormGroupオブジェクトの配列で、これを使用してコントロール、つまりFormArrayオブジェクトを取得しました：

this.checkoutFormGroup.get('products')

インデックスiの製品配列の要素を取得しようとしています。配列をループせずにこれを行うにはどうすればよいですか？

編集：

利用可能なat（index）メソッドで試しました：

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],
                    }))
            });
angulartypescriptangular2-forms
24
Sumit Agarwal

そのコントロールを配列にキャストするだけです

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

そして、そのすべての機能がそこにあります

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

現在受け入れられている答えの選択肢としてのライナー

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

// .tsコンポーネントファイル//

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