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

Angular Universal (Server-Side Rendering) does not pre-render content in specific languages

I have implemented ngx-translate for my multi-language application. app.module.ts import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core'; export function HttpLoaderFactory(httpClient: HttpClient) { return new ...

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Desired Outcome for my Javascript: I am working with a div that includes an "onmouseover='getPosition(x)'" attribute which can be dynamically added and removed through my javascript by clicking a specific button. The function 'getPosition() ...

"Implementing a loading function on a particular div element within a loop using

Hey everyone! I'm new to this forum and have recently made the switch from jQuery to Vue.js - what a game-changer! However, I've hit a little snag. I need to set v-loading on multiple buttons in a loop and have it start showing when clicked. Her ...

React: Trying to use the map function on an empty array will result in an error

I am currently facing an issue while trying to populate a shopping cart with items. Even though I have initialized the cart as an empty array, I keep encountering the following error: TypeError: cart.map is not a function ProductContext.js:34 addItemToCar ...

Identifying if a variable is redirecting

Dealing with React Router Dom V6 I am facing an issue with two loader functions that make server requests. async function fetchUserDetails(userId, userAction) { const token = getAuthToken(); const userData = await axios({ url: API.endpoint + &apos ...

What is the process for incorporating JavaScript-generated coordination into an HTML form?

As a newcomer to Javascript, I am on a mission to integrate geo coordination directly into an HTML form input field. After learning from W3Schools how to generate user latitude and longitude Coordination, I am now eager to input them directly into an HTML ...

Unable to execute a JavaScript function when triggered from an HTML form

This is the code for a text conversion tool in HTML: <html> <head> <title> Text Conversion Tool </title> <script type="text/javascript"> function testResults(form) { var str = form.stringn.value; var strArray = str.split(" ...

What is the proper method for utilizing the .done or .complete functions in conjunction with .toggle in jQuery?

I am struggling to understand the proper usage of .complete or .done after .toggle in jQuery. My goal is to have the button's text change after the toggle animation finishes, but I'm not sure if I'm chaining them correctly. The jQuery docume ...

Customizing Column Background Color with AngularJS

My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Currently, the holiday highlight (pur ...

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

Jest may come across test suites, but it discreetly disregards the individual tests

Having encountered an issue with Jest testing in a Nuxt/Vue v2 project, I found that after making some changes, the tests were no longer running. The unit tests were either passing or failing initially, but suddenly stopped running altogether. ----------|- ...

Ways to verify if the inner <div> contains any text

I am attempting to determine if the inner <div> contains the text "Ended" and then remove it if it does. There are multiple <div> elements with the same class. I have attempted to use the .filter() method. My goal is to remove the container_one ...

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

Implementing a dynamic like functionality using Ajax in Django

I've created a new structure for the like button, but it's not functioning correctly. Here are the files I'm working with: models.py class Comment(models.Model): title = models.CharField(max_length=50) author = models.ForeignKey(Pr ...

Ways to tidy HTML/XML code?

Upon receiving a web service response, the data appears as such: <text>&lt;span class="TitleServiceChange" &gt;Service Change&lt;/span&gt; &lt;span class="DateStyle"&gt; &amp;nbsp;Poste ...

The issue of passing a local object from ng-repeat into a directive controller remains unresolved

I'm struggling to pass my local object from ng-repeat to a directive. My goal is to access the data from that object within the controller of the directive. The confusion arises with how the isolated scope and controller scope interact. I can't f ...

Transferring object information to Backand using Ionic 2

I have developed a signup page using Ionic 2. In this signup page, I have included a dropdown menu for users to select their blood type. However, I am facing an issue where the selected blood type is not being sent to the Backand database as expected. I&ap ...

Is it possible to upload an image-containing object to Mongodb with the help of Node.js?

I am struggling to upload an object containing an image to the mongodb database using Node.js. Angular File onSelectedFile(event){ this.edit_image = event.target.files[0]; } editProfile(e){ const user={ email:this.edit_email, img:this.edit_imag ...

What is the process for importing string data into an Excel document using Angular?

I'm encountering a situation where I have non-JSON data coming from the backend. How can I efficiently write this type of data into an Excel file? To handle this task, I've utilized XLSX and FileSaver libraries by referencing an example on Plunk ...

Encountered an issue with undefined property when attempting to add a second value to an array of

I have been working on the following javascript code: var res = [{}]; for (var idx = 0; idx < json.length; idx++) { // if the environment is already entered in the result if (res[idx].env) { sails.log.debug('Enviro ...