Angular FormArray Get Multiple Values 使用方式

當有多個輸入框在頁面中，按照 Angular 的文件，我們可以利用 *ngFor 可以組合出 n 個同一個元件組成的頁面，並且使用 FromArray 取得所有內容值。那麼，當有不同元件組成的時候，要怎麼做呢？

Photo by Kaleidico on Unsplash

假設我們取得了一個需求，表格需要動態產生，呈現頁面如下：

上圖中，表格中的下拉選單與輸入欄位皆是動態產生的，要怎麼取得所有的值呢？

Step1

除了已設定 [formGroup]=”form” 的元件之外，選擇一個能包含所有元件的容器，加入 formArrayName 的屬性設定，如下：

<ng-template pTemplate="body" formArrayName="array">

Step2

在 ngOnInit 中，加入下列程式，取得 array

this.form = this.formBuilder.group({
array: this.formBuilder.array([]),
});

Step3

在剛剛設定 formArrayName 屬性的容器往內層找一個元件，加入 fromGroup 屬性

<tr *ngFor="let arrayFrom of array.controls; let i = index" [formGroup]="arrayFrom">

Step4

在要取值的元件中，每一個都加入 formControlName 屬性

<input formControlName="carName" type="text" pInputText maxlength="10" />

Step5

在 component.ts 檔程式中，加入下列設定

get array() {
return this.form.get('array') as FormArray;
}

取值

網頁端都設定無誤後，只要利用下列程式就能取得 array 裡的所有值，而且是以 json 格式呈現

console.log(this.array.value);

程式碼

範列程式可參考下列內容

參考來源

Angular

Angular FormArray - Complete Guide

Angular FormArray Example - TekTutorialsHub