Error message in the console when using a single select checkbox in PrimeNG

When I select one checkbox, the others should be automatically unselected. Additionally, clicking on a selected checkbox should also deselect it. Currently, my implementation looks like this:

In the HTML page, I am utilizing *ngFor in the following manner:

<ng-container *ngFor="let item of items">
<div>
    <p-checkbox (onChange)="changeValue(item.value)"  [(ngModel)]="selectedValue" name="test" value="{{item.value}}" [inputId]="item.value"></p-checkbox>
    <label [for]="item.value">{{item.label}}</label>
</div>
</ng-container>

Within my component, I have the following setup:

public items: any[] = [
    { label: 'labelOne', value: true },
    { label: 'labelTwo', value: false }
]

public selectedValue;

public changeValue(value) { 
   this.selectedValue = value; 
}

Everything is functioning as expected, but an error pops up in the console upon clicking on a selected checkbox:

Checkbox.html:7 ERROR TypeError: this.model.filter is not a function
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.removeValue (primeng-checkbox.js:87)
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.updateModel (primeng-checkbox.js:62)
at Checkbox.push../node_modules/primeng/fesm5/primeng-checkbox.js.Checkbox.onClick (primeng-checkbox.js:52)
at Object.eval [as handleEvent] (Checkbox.html:7)
at handleEvent (core.js:29239)
at callWithDebugContext (core.js:30309)
at Object.debugHandleEvent [as handleEvent] (core.js:30036)
at dispatchEvent (core.js:19859)
at core.js:28448
at HTMLDivElement.<anonymous> (platform-browser.js:1032)

Any insights into what might be going wrong? Thank you!

angulartypescriptprimeng

Answer №1

To meet the specified criteria, make the required adjustments to the changeValue function as follows:

changeValue(value) { 
  if(this.selectedValue.length === 2) {
    this.selectedValue = [value]; //since selectedValue is an array
  } 
}

PrimeNg uses the p-checkBox ngModel property to bind selected values in an array format.

Answer №2

To explore another approach, consider utilizing the binary option. For more information, refer to the section on "Boolean value" at this link. This option enables the selection of a boolean value instead of multiple values.
In your specific scenario, the checkbox code should be structured as follows:

<p-checkbox  [binary]="true" (onChange)="changeValue(item.value)"  [(ngModel)]="selectedValue" name="test" value="{{item.value}}" [inputId]="item.value"></p-checkbox>

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

Using Angular 5 components within raw HTML: A step-by-step guide

I am struggling with displaying an Angular component within a template using the onClick function in my current code. How can I achieve this? Currently, when I click on the button, all I see is "Test code" without the desired democomponent. export class ...

angularangular5

Boolean value 'isEdit' in Angular not being updated within the subscribe callback

Having a problem updating the isEdit component property within the event emitter's subscribe callback in my Angular application. Situation: In my CreateComponent, I handle adding or editing mobiles. The isEdit property (boolean) determines whether t ...

angularangular2-changedetection

Creating an array from a numerical value in Angular Controls

In my application, I need to create an array starting from 1 up to a specified number, which in this case is 6, using JavaScript/TypeScript. Here is my attempted code: this.builder.group({ 'staff': this.builder.group({ staf ...

javascriptangulartypescript

Angular: Issue with subscribed variable visibility on screen

I am currently developing user management functionality. When a button is clicked, the goal is to save a new user and display an incoming password stored in the system. Below is a snippet of my code: onClick() { /*Code to populate the newUser variable from ...

angulartypescriptngrx-store

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Typescript is issuing warnings when displaying errors for the RTK query

I am currently using React Ts and Rtk query. My goal is to display the API response error on the UI. While it's working, I am encountering a warning that prompts me to set an error type for the response errors. How can I incorporate an error type for ...

reactjstypescriptreduxrtk-query

Utilizing Sequelize with Typescript for referential integrity constraints

After defining these two Sequelize models: export class Users extends Model<Users> { @HasMany(() => UserRoles) @Column({ primaryKey: true, allowNull: false, unique: true }) UserId: string; @Column({ allowNull: false, unique: tru ...

javascriptnode.jspostgresqltypescriptsequelize.js

Error in inferring argument types for a generic interface function in Typescript

Unique interface export interface DataService { getByTypeId<T extends number | string>(id: T): Promise<SomeType>; } Additionally, the implementation export class BService implements DataService { async getByTypeId(id: number): Promise&l ...

javascripttypescript

Is there a way to configure ESLint so that it strictly enforces either all imports to be on separate lines or all on a single line?

I am currently using ESLint for TypeScript linting. I want to set up ESLint in a way that requires imports to be either all on separate lines or all on a single line. Example of what is not allowed: import { a, b, c, d } from "letters"; Allo ...

typescripteslint

The element 'md-chips' from Angular2 material is unrecognized

I am currently developing an Angular2 application utilizing @angular/material 2.0.0-beta.2 and I am facing a challenge in implementing Chips, as I keep receiving the error message 'md-chips' is not a known element. Here are the steps I have taken ...

angularangular-material

Is it feasible to transform an entire Angular project into an Angular library? Learn how to successfully convert your

After successfully creating a project in Angular 13, my next goal is to transform the entire project into an Angular library. This Angular library will then be utilized in another Angular project for further development and enhancement.https://i.sstatic. ...

angularprimengangular-libraryangular13

Issue in NativeScript: The scrollable height is consistently shown as 0

I have created a Chat feature and I am trying to make sure that the chat window always scrolls to the most recent message. Here is the HTML code: <ActionBar> <NavigationButton (tap)="onBackTap()" android.systemIcon="ic_menu_bac ...

angularlistviewnativescript

I need to access the link_id value from this specific actionid and then execute the corresponding function within the Ionic framework

I have a JavaScript code in my TypeScript file. It retrieves the attribute from a span element when it is clicked. I want to store this attribute's value in a TypeScript variable and then call a TypeScript function. Take a look at my ngOnInit method, ...

javascriptangulartypescriptionic-frameworkionic2

TypeScript's Awaitable concept

Lately, I have been utilizing async / await functions quite frequently in my JavaScript projects. As I make the transition to TypeScript, I am gradually converting some sections of my code bases. In certain scenarios, my functions require a function as an ...

typescriptasync-await

Mapping properties between objects in Typescript: transferring data from one object to another

Here are two different types and an object: type TypeX = { x: number; y: number; z: number; }; type TypeY = { u: number; v: number; w: number; }; initialObject: { [key: string]: TypeX }; The goal is to transfer the properties from an object of ...

typescript

Leverage the capabilities of mat-datepicker independently without relying on an

Is it possible to have the datepicker located in a fixed sidebar that is always visible and not linked to an input field? My idea was to include the component and set opened = true so that the datepicker remains in a box that is constantly displayed. ...

angularangular-material2

The .angular-cli.json file is causing issues with loading scripts

I have recently updated my .angular-cli.json file by adding new scripts in the following format: "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html ...

javascriptangulartwitter-bootstrapbootstrap-4

Tips on downloading a dynamically created XML file using ServiceStack and Angular

Although the code below is theoretically functional, it lacks proper error handling. The issue arises when the XML file starts downloading upon opening a new window with the URL generated by the service stack. In case of a server-side error, you are left o ...

c#angularservicestack

Encountering the error "Typescript: No overload matches this call" while attempting to include custom attributes in styled-components

While working on a TypeScript-React project, I encountered an error when creating an image component using styled-components. Below is the snippet from my style.ts file: https://i.sstatic.net/nVm4n.png The error message I received is: https://i.sstatic.ne ...

reactjstypescriptstyled-components

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

cssangular