欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2022年05月27日 10:28:06   作者:小強(qiáng)Zzz  
AngularJS中數(shù)據(jù)綁定相信大家應(yīng)該都不陌生了,這篇文章主要給大家介紹了關(guān)于angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

對(duì)于一個(gè)多選類(lèi)型,如何獲取所有已選擇的數(shù)組。

嘗試

獲取formControl的value。

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

對(duì)于綁定多選類(lèi)型的formControl的value,只會(huì)有true或者false。

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

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

<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,猜測(cè)可能先出發(fā)點(diǎn)擊時(shí)間,后進(jìn)行表單數(shù)據(jù)綁定。
改寫(xiě)方法

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

測(cè)試

但是如果多選題本身就有對(duì)象數(shù)組,如何初始化。

想著用input 標(biāo)簽的checked="checked"屬性確定初始化選項(xiàng),發(fā)現(xiàn)并未生效,去除input標(biāo)簽的[formControl]="formControl"后,就生效了,猜測(cè)可能兩個(gè)屬性沖突。

查看博客上實(shí)例,對(duì)于每一個(gè)選項(xiàng)綁定一個(gè)formControl。定義一個(gè)FormArray整合所有formControl。如果有需要可以嘗試。
https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values/69637536#69637536

總結(jié)

到此這篇關(guān)于angular多選表單數(shù)據(jù)綁定的文章就介紹到這了,更多相關(guān)angular多選表單數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Angular directive遞歸實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)代碼實(shí)例

    Angular directive遞歸實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)代碼實(shí)例

    本篇文章主要介紹了Angular directive遞歸實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)代碼實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • AngularJS service之select下拉菜單效果

    AngularJS service之select下拉菜單效果

    這篇文章主要為大家詳細(xì)介紹了AngularJS service之select下拉菜單效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • AngularJs定時(shí)器$interval 和 $timeout詳解

    AngularJs定時(shí)器$interval 和 $timeout詳解

    這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • Angular4學(xué)習(xí)筆記router的簡(jiǎn)單使用

    Angular4學(xué)習(xí)筆記router的簡(jiǎn)單使用

    本篇文章主要介紹了Angular4學(xué)習(xí)筆記router的簡(jiǎn)單使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03
  • 最新評(píng)論