0%

Angular 筆記 - FormArray 表單實作

angular

Angular 筆記 - form 表單基礎實作 還有另一個表單實作,就是 formArray。

formArrayName 指令

  1. 一樣是在 [formGroup] = 'form' 中實作。
  2. 因為是陣列取值,所以要跑迴圈

    tips: 看到陣列就要想到要跑迴圈的方法。

  3. 但因為 nameArr 並不是真的陣列,所以還是要套用 form 裡面的 controls 的屬性,才取得到值。
  4. 為了給予序列,給予一個 i 變數存放 index
  5. 使用屬性繫結綁定 formGroupName 的指令,其值為序列的變數 i

form.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form [formGroup]="form">
<div formArrayName="nameArr">
<div
class="p-field"
*ngFor="let item of nameArr.controls; let i = index"
[formGroupName]="i"
>
<label>
<span> firstKidName </span>
<input type="text" pInputText formControlName="firstKidName" />
</label>

<br />
<label>
<span> secondKidName </span>
<input type="text" pInputText formControlName="secondKidName" />
</label>
</div>
</div>
</form>

form.component.ts

  1. 建立一個方法,並新增物件在 nameArr 的陣列中。
  2. 使用 FormBuilder 中的 group 方法,是新增物件的語法。
  3. 並在先前的表單中呼叫 createFromArray 的函式。
  4. 取得 nameArr 的內容,使用 get 方法,讓其屬性的值與 FormArray 相符。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 get nameArr() {
return this.form.get('nameArr') as FormArray;
}

createForm() {
this.form = this.formBuilder.group({
formName: [{ value: '1111', disabled: true }, Validators.required],
firstName: ['', Validators.required],
lastName: ['', Validators.required],
nameArr: this.formBuilder.array([]),
});
// 驗證表單與觀察表單變數的狀態,類似 vue watch
this.form.get('formName').valueChanges.subscribe((res) => {
console.log('value:', res);
});
this.createFormArray(); //呼叫函式
}

createFormArray() {
this.nameArr.push(
this.formBuilder.group({
firstKidName: '大哥',
secondKidName: '二哥',
})
);
console.log(this.nameArr);
}

DEMO: https://stackblitz.com/edit/angular-ivy-kzcccj?embed=1&file=src/app/app.component.ts