PrimeNG P-ListBox throwing error upon selection

Question

Upon selecting an item from my listbox module i am getting an error thrown for some reason the value keeps coming in as an object instead of an array to my listbox.js which is from p-listbox from PrimeNG

HTML:

<p-listbox formControlName="programType" [options]="phoneTypeItems"  multiple="multiple" [style]="{'width':'350px'}" [listStyle]="{'max-height':'150px'}"
                     checkbox="checkbox" filter="filter">

                    </p-listbox>

.TS:

import { ListboxModule } from 'primeng/primeng';

export class SearchCareResultsComponent {

phoneTypeItems = [{ label: 'Mobile', value: '1' }, { label: 'Work', value: '2' }, { label: 'Home', value: '3' }]

}

Here is the error:

Listbox.html:28 ERROR TypeError: this.value.concat is not a function at Listbox.webpackJsonp.../../../../primeng/components/listbox/listbox.js.Listbox.onCheckboxClick (listbox.js:277) at Object.eval [as handleEvent] (Listbox.html:28) at handleEvent (core.es5.js:12014) at callWithDebugContext (core.es5.js:13475) at Object.debugHandleEvent [as handleEvent] (core.es5.js:13063) at dispatchEvent (core.es5.js:8607) at core.es5.js:9218 at HTMLDivElement. (platform-browser.es5.js:2651) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) at Object.onInvokeTask (core.es5.js:3881)

Picture of the UI and error location:

i posted the snippet that is generating that p-listbox (the html and .ts portion) the whole code is way too big and i do not think it is relevant ( i thinK) — BadGuyKUTA
it seems to be an issue with the primeng, but the issue lies in your array. create a demo and reproduce the issue — Sajeetharan
The problem might be that the value that is attached to the programType formControl is an object instead of an array of objects — Guy E

Er. Bahuguna Goyal Er. Bahuguna Goyal · Accepted Answer · 2018-01-06T07:09:34

Which version of PrimeNG you are using ?

Maybe try the documentation from here.

Try with simple cities object if it works for you.

this.cities1 = [
            {label:'Select City', value:null},
            {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
            {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
            {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
            {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}}
            {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
        ];


<p-listbox [options]="cities" [(ngModel)]="selectedCities" filter="filter"></p-listbox>

PrimeNG P-ListBox throwing error upon selection

1 Answers