Angular 筆記 - FormArray 表單實作

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

formArrayName 指令

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

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

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

form.component.html

<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 相符。

 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