Using PrimeNG checkboxes to bind objects in a datatable

PrimeFaces Checkbox

In the code snippet below, my goal is to add objects to an array named selectedComponents in a model-driven form when checkboxes are checked.

The object type of item1 is CampaignProductModel, which belongs to an array called selectedComponents in my form's model.

I am facing difficulties in binding and adding all checked items to the array in my model object.

<p-dataTable *ngIf="previousCampaignProduct" [value]="previousCampaignProduct" #dt [responsive]="true" filter="filter" [rows]="25" [paginator]="true" selectionMode="single" [(selection)]="selectedItem" [contextMenu]="cm">
        <p-header>Previous Campaign Products</p-header>
        <p-column header="Images">
            <template let-item="rowData" pTemplate="body">
                <img style="max-height:150px;" src="http://cdnll.somesite.com/images/1000/{{item.itemSku}}.jpg" />
            </template>
        </p-column>
        <p-column field="itemSku" header="Item" [filter]="true" filterMatchMode="contains" filterPlaceholder="Search"></p-column>
        <p-column field="components" header="Components">
            <template let-item="rowData" let-col pTemplate="body">
                <ul style="list-style: none;">
                    <li *ngFor="let item1 of item[col.field]">
                        <p-checkbox value="item1" formControlName="selectedComponents" label="{{item1.itemSku}}"></p-checkbox>
                    </li>
                </ul>
            </template>
        </p-column>
    </p-dataTable>

Goal:

To add all checked items from p-checkbox as objects to an array in my model-driven form.

Tried:

value="{{item1}}"

... I knew it wouldn't work

Answer №1

It's a bit delayed, but I believe this solution can address your issue. Make the following code adjustment:

 <p-checkbox value="item1" formControlName="selectedComponents" label="{{item1.itemSku}}"></p-checkbox>

Replace it with:

 <p-checkbox [value]="item1" formControlName="selectedComponents" [label]="item1.itemSku"></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

The try-catch statement in Typescript is generating an inconsistent return error

I've encountered an issue with a TypeScript function that is flagging inconsistent return error. The function includes a try block that returns a value and a catch block that throws an error, resulting in the inconsistency. I am struggling to find a w ...

There is a lack of definition for an HTML form element in JavaScript

Encountering an issue with a HTML form that has 4 text inputs, where submitting it to a Javascript function results in the first 3 inputs working correctly, but the fourth being undefined. Highlighted code snippet: The HTML section: <form action="inse ...

Acquiring the API through the callback function within a React application

I wrote a function that connects to an API and fetches data: import {API_KEY, API_URL} from "./constants"; export const getOperations = async (id, successCallback) => { try { const response = await fetch(`${API_URL}/tasks/${ ...

When transitioning to generics, the narrowing of types in TypeScript is sometimes lost

I am intrigued by this scenario where Test1 fails while Test2 succeeds. I wonder if there is a way to have Test1 pass without altering the generic signature: enum TableType { Shipment = "Shipment", Batch = "Batch", } type Test& ...

Refining information and displaying it alongside the "indelible" data - react

I recently implemented a TextField component from the MUI library, along with a useRef hook to capture user input "live" as they type. The goal is to filter rates based on the characters entered by the user. Currently, I am working with an array of rate ke ...

How can we assign various class names depending on the value of an object?

I have a set of objects stored in my component. I need to dynamically apply different classes based on the value of the ErrorLevel property within each object. If an object has ErrorLevel equal to 1, I want to assign the following classes to various elemen ...

Is it possible to use a webcam to scan a QR code directly into a webpage?

Is it possible to enable users to input data on a webpage using QR code scanning? I'm unsure if there is a tool that can be integrated into the page or paired with a library to make this happen, or if I need to consider an external solution beyond th ...

Instantiate the component array upon object instantiation

I'm currently in the process of learning Angular 2, so please bear with me if this question seems trivial. I am attempting to create a dynamic form that can be bound to a model. However, I am encountering an issue where I am unable to initialize my ar ...

AJAX: Learn how to execute an AJAX call using a JavaScript function

Is there a method to determine (using developer tools like Chrome, Firefox, Opera, etc) the most recent function that triggers an AJAX call? This could be helpful for debugging web applications. Appreciate your help ...

Having trouble compiling Typescript code when attempting to apply material-ui withStyles function

I have the following dependencies: "@material-ui/core": "3.5.1", "react": "16.4.0", "typescript": "2.6.1" Currently, I am attempting to recreate the material-ui demo for SimpleListMenu. However, I am encountering one final compile error that is proving ...

Issues with integrating Angular Cypress Component tests with Tailwindcss are causing problems

While implementing Tailwindcss in an Nx style monorepo structure with 'apps' and 'libs' folders, I configured the Tailwind file as follows: content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'], However, despi ...

Ways to keep information hidden from users until they actively search for it

Currently, I have a custom filter search box that is functioning correctly. However, I want to modify it so that the data is hidden from the user until they perform a search. Can you provide any suggestions on how to achieve this? Below is the code I am u ...

What could be the reason for Angular 2 not recognizing this valid regex pattern?

The regular expression shown below is considered valid (check here): ^(\+27|27|0)\s?(\d{2})[-\s]?(\d{3})[-\s]?(\d{4})$ Despite its validity, Angular 2 throws the following error: EXCEPTION: Error in ./App class App - i ...

What steps should be taken to transform this Jquery Ajax code into Pure Javascript Fetch?

I am looking to convert this Jquery Ajax snippet to Fetch using Pure Javascript. Can you provide assistance? I attempted this previously, but my code did not function properly. I even posted a question about it here. That is why I am hoping for your help ...

Can TypeScript support passing named rest arguments within the type declaration?

Using Tuple types in TypeScript enables us to create typesafe rest arguments: type Params = [string,number,string] const fn = (...args: Params) => null // Type is (args_0: string, args_1: number, args_2: string) => null Is there a method to assign ...

What is the best way to ensure that the base class Resolver finishes before allowing the derived class Resolver to execute?

I have a situation where many of my resolvers (@angular/router Resolve) need to query the same data before executing their route-specific queries. To streamline this process, I want to create a resolver base class that resolves the initial data before the ...

Error message "process.nextTick(() => { throw err; });" encountered while attempting to build an Angular image in a Docker environment

Looking at my Dockerfile below, I had everything set up just fine two weeks ago when I ran docker build -t imgTest .. However, today when I tried running it again, I encountered the following error: Node.js version v21.0.0 detected. Odd numbered Node.js ve ...

JavaScript error: Function is not defined when using Paper.js

UPDATE the problem has been solved by making the colorChange function global I am attempting to modify the color of the path when the 'Red' button is clicked using the colorChange function. Despite my efforts, I keep getting an error stating tha ...

JavaScript retrieve data from an external JavaScript file

How can I retrieve the id value from my rendering.js file? <script type="text/javascript" src="./js/rendering.js?id=3"> I am trying to access the id value in my rendering.js script. Any suggestions on how to accomplish this? ...

Using JQuery toggleclass to add transitioning effects to a :after element

I'm using the toggleClass function to add the class .expend to a div with an ID of #menu, which increases the height of the menu from 100px to 200px with a smooth transition effect. I also have a pseudo-element #menu:after for aesthetic purposes. My ...