angular多選表單數據綁定的簡單嘗試
更新時間：2022年05月27日 10:28:06 作者：小強Zzz
AngularJS中數據綁定相信大家應該都不陌生了,這篇文章主要給大家介紹了關于angular多選表單數據綁定的簡單嘗試,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
對于一個多選類型，如何獲取所有已選擇的數組。
嘗試
獲取formControl的value。
this.formControl.valueChanges.subscribe(value => {
console.log(value);
})對于綁定多選類型的formControl的value，只會有true或者false。
如果你選中就是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，猜測可能先出發(fā)點擊時間，后進行表單數據綁定。
改寫方法
selectCheckBox(isCheck: boolean, option: FormItemOption): void {
// 如果index值為-2，表示數組為定義，創(chuàng)造一個數組
// 如果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);
}
}測試
但是如果多選題本身就有對象數組，如何初始化。
想著用input 標簽的checked="checked"屬性確定初始化選項，發(fā)現并未生效，去除input標簽的[formControl]="formControl"后，就生效了，猜測可能兩個屬性沖突。
查看博客上實例，對于每一個選項綁定一個formControl。定義一個FormArray整合所有formControl。如果有需要可以嘗試。
https://stackoverflow.com/questions/40927167/angular-reactiveforms-producing-an-array-of-checkbox-values/69637536#69637536
總結
到此這篇關于angular多選表單數據綁定的文章就介紹到這了,更多相關angular多選表單數據綁定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
AngularJS是Google開發(fā)的純客戶端JavaScript技術的WEB框架,用于擴展、增強HTML功能,它專為構建強大的WEB應用而設計。下面這篇文章我們來分享如何利用Angularjs實現幻燈片效果。2016-09-09
這篇文章主要介紹了angularJS 中$scope方法使用指南,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了Angular實現雙向折疊列表組件的示例代碼，分為左右兩組，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Angular中使用$watch監(jiān)聽object屬性值的變化(詳解)
下面小編就為大家?guī)硪黄狝ngular中使用$watch監(jiān)聽object屬性值的變化(詳解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
在Angular.JS中可以使用數組或對象創(chuàng)建一個下拉列表選項。關于Angular.js中select的基礎相信大家應該都已經了解了，那么下面這篇文章主要給大家介紹了Angular2中select用法之設置默認值與事件的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
本篇文章給大家分享了angularjs結合html5實現拖拽功能的方法以及代碼實例，有興趣的朋友參考下。2018-06-06
本篇文章主要介紹了angularJS模態(tài)框$modal實例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
后端接收不到AngularJs中$http.post發(fā)送的數據原因分析及解決辦法
這篇文章主要介紹了后端接收不到AngularJs中$http.post發(fā)送的數據原因分析及解決辦法的相關資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了Angular4的輸入屬性與輸出屬性,結合實例形式詳細分析了Angular4輸入屬性與輸出屬性的概念、功能及相關使用技巧,需要的朋友可以參考下2017-11-11