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],
}))
});
そのコントロールを配列にキャストするだけです
var arrayControl = this.checkoutFormGroup.get('products') as FormArray;
そして、そのすべての機能がそこにあります
var item = arrayControl.at(index);
現在受け入れられている答えの選択肢としてのライナー
var item = (<FormArray>this.checkoutFormGroup.get('products')).at(index);
// .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>