angular多選表單數(shù)據(jù)綁定的簡單嘗試

更新時間：2022年05月27日 10:28:06 作者：小強Zzz

AngularJS中數(shù)據(jù)綁定相信大家應該都不陌生了,這篇文章主要給大家介紹了關于angular多選表單數(shù)據(jù)綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

對于一個多選類型，如何獲取所有已選擇的數(shù)組。

嘗試

獲取formControl的value。

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

對于綁定多選類型的formControl的value，只會有true或者false。

如果你選中就是true，如果不選中就是false。但是我想要的是所有選中對象數(shù)組。

谷歌搜索得知，可以綁定點擊事件，再去增加或刪除數(shù)組中的對象。

<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，猜測可能先出發(fā)點擊時間，后進行表單數(shù)據(jù)綁定。
改寫方法

selectCheckBox(isCheck: boolean, option: FormItemOption): void {
    // 如果index值為-2，表示數(shù)組為定義，創(chuàng)造一個數(shù)組
    // 如果index值為-1，表示所選選項并未處于數(shù)組內，添加之
    // 如果index值大于等于0，筆試所選選項處于數(shù)組內，刪除之
    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);
    }
  }