angular多選表單數(shù)據(jù)綁定的簡(jiǎn)單嘗試
前言
對(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.js數(shù)據(jù)綁定時(shí)自動(dòng)轉(zhuǎn)義html標(biāo)簽及內(nèi)容
本篇文章主要介紹了詳解Angular.js數(shù)據(jù)綁定時(shí)自動(dòng)轉(zhuǎn)義html標(biāo)簽及內(nèi)容 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的輸入框字?jǐn)?shù)限制提醒功能,涉及AngularJS事件監(jiān)聽(tīng)與元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-10-10angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例
今天小編就為大家分享一篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09AngularJS實(shí)用開(kāi)發(fā)技巧(推薦)
Angular JS 是一組用來(lái)開(kāi)發(fā)Web頁(yè)面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。接下來(lái)通過(guò)本文給大家介紹AngularJS實(shí)用開(kāi)發(fā)技巧的相關(guān)資料,需要的朋友可以參考下2016-07-07

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

AngularJS service之select下拉菜單效果

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

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