angular 多選表單資料繫結

小強Zzz發表於2022-05-25
Angular

前言

對於一個多選型別，如何獲取所有已選擇的陣列。

嘗試

獲取formControl的value。

this.formControl.valueChanges.subscribe(value => {
      console.log(value);
})

對於繫結多選型別的formControl的value，只會有true或者false。
image.png
如果你選中就是true，如果不選中就是false。但是我想要的是所有選中物件陣列。
谷歌搜尋得知，可以繫結點選事件，再去增加或刪除陣列中的物件。

<div *ngFor="let option of formItem.formItemOptions; index as i" class="form-check">
        <input  [formControl]="formControl" [value]="option.id"
                (click)="selectCheckBox(formControl.value, option)"
                 class="form-check-input"
                type="checkbox" >
        <label class="form-check-label mr-1" for="{{id}}_{{option.id}}">
          <span>{{option.content}}</span>
        </label>
      </div>
selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    if (isCheck) {
      this.formItemValue.formItemOptions.push(option);
    } else {
      const index = this.formItemValue.formItemOptions.indexOf(option);
      this.formItemValue.formItemOptions.splice(index, 1);
    }
}

但是獲取傳入的formControl.value變數為null，猜測可能先出發點選時間，後進行表單資料繫結。
改寫方法

selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    // 如果index值為-2，表示陣列為定義，創造一個陣列
    // 如果index值為-1，表示所選選項並未處於陣列內，新增之
    // 如果index值大於等於0，筆試所選選項處於陣列內，刪除之
    const index = Array.isArray(this.formItemValue.formItemOptions) ? this.formItemValue.formItemOptions.indexOf(option) : -2;
    if (index < -1) {
      this.formItemValue.formItemOptions = [option];
    } else if (index < 0) {
      this.formItemValue.formItemOptions.push(option);
    } else {
      this.formItemValue.formItemOptions.splice(index, 1);
    }
  }

測試
image.png

但是如果多選題本身就有物件陣列，如何初始化。
想著用input 標籤的checked="checked"屬性確定初始化選項，發現並未生效，去除input標籤的[formControl]="formControl"後，就生效了，猜測可能兩個屬性衝突。

image.png
檢視部落格上例項，對於每一個選項繫結一個formControl。定義一個FormArray整合所有formControl。如果有需要可以嘗試。
https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values/69637536#69637536

相關文章