Error Arises When Making Selection in PrimeNG's P-ListBox Component

Whenever I choose an item from my listbox module, I encounter an error where the value is being returned as an object instead of an array in my listbox.js file from p-listbox by 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 message that I am encountering:

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)

Screenshot of the UI and the error location: https://i.stack.imgur.com/cjQKi.png

angularprimeng

Answer №1

What is the version of PrimeNG that you are currently using?

If you need assistance, check out the documentation available here.

You can test it with a simple cities object to see if it meets your requirements.

this.cities = [
            {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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 6's removeAt and trackBy functions are causing issues in updating the formArray and not reflecting the

Within a formGroup, I am adding and deleting elements from a formArray. To keep track of the ids to delete, I am using trackBy. When calling the function delete(i), it successfully removes the correct element from the formArray in the form. However, in th ...

angularformarray

Are there any methods within Angular 2 to perform Angular binding within a string?

When creating an HTML template with routing, such as shown below: <ul class="sb-sub-menu"> <li> <a [routerLink]="['clientadd']">Client Add</a> </li> </ul> It functions as expected. However, w ...

typescriptangular

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

javascriptangulartypescriptleaflet

It appears that Jest is having trouble comprehending the concept of "import type"

We've just completed a major update to our monorepository, bringing it up to date with the following versions: Nx 14.3.6 Angular 14.0.3 Jest 28.1.1 TypeScript 4.7.4 Although the compilation process went smoothly after the upgrade, we encountered num ...

angulartypescriptjestjstype-only-import-export

Please exclude any files with the name npm-debug.log.XXXXXX in the .gitignore file

Is there a way to exclude this file from the repository using .gitignore? https://i.stack.imgur.com/mK84P.png I am currently working on Gitlab. I have attempted the following: https://i.stack.imgur.com/2kN21.png Appreciate any help in advance ...

angulargitnpmgitignorenpm-debug

Response Looping Function

I am struggling with looping and storing data in an array. /** Model for displaying response*/ export class ResultsData { id: number, name: string, startDate: string, endDarte: string, startTime: string, ...

javascriptarraysangulartypescriptlodash

There was an issue encountered while trying to use HTTPS with a self-signed certificate from a

I made the switch to using https for my nodejs server by following these steps: const https = require('https'); const privateKey = fs.readFileSync('sslcert/server.key', 'utf8'); const certificate = fs.readFileSync('sslc ...

node.jsangularjsangularexpressssl

The presence of a method is triggering an Error TS2741 message stating that the property is missing in type

Here is a simplified code snippet that highlights the issue I am facing: class Test { prop1 : boolean prop2 : string method() { } static create(prop1 : boolean, prop2 : string) : Test { let item : Test = { prop1: prop1, prop2: pro ...

angulartypescriptangular8

TS18047 jest error: "object may be null"

I'm currently working on a test (jtest) for an angular component, but it keeps failing due to this particular error. Any thoughts on how to resolve this? :) it("should require valid email", () => { spectator.component.email.setValue( ...

angulartypescriptjestjs

Troubleshooting Angular: Resolving the Fatal Error 'SyntaxError: Unexpected token <' During Startup

I keep encountering this mysterious error repeatedly, especially after making changes to my Angular (2-5) dependencies. SyntaxError: Unexpected token < at eval (<anonymous>) at evaluate (http://localhost:5557/node_modules/systemjs/dist/sy ...

angular

Circular Dependency Detected in Angular 7 Library: A Tight Web of Directive, Service, and Module Interconnections

After setting up a new Angular 7 project with a library that includes a directive, a service, and a module (where the directive gets the service injected and the service has an injectionToken exported in the module), I encountered these warnings during com ...

angulardependency-injectionangular-directivecircular-dependency

Tips for accessing child elements within an Angular component

I'm struggling to get a reference of child elements within a component. I have experimented with ElementRef, TemplateRef, QueryList, ViewChild, ViewChildren, ContentChild, and ContentChildren without success. <app-modal> <section #referenc ...

javascriptangulartypescript

The button will be disabled if any cells in the schedule are left unchecked

I am seeking help on how to dynamically disable the save button when all checkboxes are unchecked. Additionally, I need assistance with enabling the save button if at least one hour is selected in the schedule. Below is my code snippet for reference: htt ...

javascriptangulartypescript

Is there a way to make divs expand on top of existing content when hovering over them, in order to avoid needing to scroll through overflow content? I am currently working with

I am working with 9 boxes contained within divs, each box includes data that exceeds the size of the box itself (represented by Some Text repeated for demonstration purposes). I am seeking a solution where hovering over any box will cause it to enlarge and ...

javascriptcssangularanimation

What is the best way to delete previously entered characters in the "confirm password" field after editing the password

Is there a way to automatically remove characters in the confirm password field if characters are removed from the password field? Currently, when characters are entered into the password field, characters can also be entered into the confirm password fiel ...

htmlangulartypescript

When a dialog box is displayed, a scrollbar will automatically appear

I've encountered a strange issue while working with Angular dialogs: A vertical scrollbar unexpectedly appears, even though I've set the dialog to have a fixed width. component.ts const dialog = this.dialog.open(DialogComponent, { width: ...

htmlcssangular

Choosing bookmarkable views in Angular 5 without using routes

I'm currently working on a unique Angular 5 application that deviates from the standard use of routes. Instead, we have our own custom menu structure for selecting views. However, we still want to be able to provide bookmarkable URLs that open specifi ...

javascripthtmlangular

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

javascripthtmljsonangulartypescript

Guide to organizing the table according to the values (timestamps) in a specific column

In one of the tables I'm working with, there is a column called uploadedOn. You can see it in action here: https://stackblitz.com/edit/angular-ivy-tntvst?devToolsHeight=33&file=src/app/app.component.ts 1: https://i.stack.imgur.com/aQ6wh.png. My g ...

angularsortingtimestampangular-material-table

What is the best way to prevent images from being loaded with broken links?

Currently, I am working on a new feature that involves rendering images from servers. In the process of aligning these images, I noticed an excessive amount of white space due to loading images with broken links. https://i.stack.imgur.com/jO8BR.png Here ...

javascripthtmlangular