Merge the values of checkboxes into a single variable

How can I gather all the checkbox values from my list and combine them into a single variable?

This is the structure of my HTML:

<div class="card" *ngFor="let event of testcases" >
     <input class="form-check-input" type="checkbox" value="{{event.upload}}" id="flexCheckDefault">
              
              {{event.name}}
              <h5 class="mb-0"> 
              </h5>
  </div>

I am looking to concatenate the "{{event.upload}}" values of the checkboxes I have checked into one variable. How can I achieve this?

For example, if my list looks like this:

testcases= [
    {
      name: 'C001',
      upload: 'Photography',
      
    },
    {
      name: 'C002',
      upload: 'Writing',
      
    },
    {
      name: 'C003',
      upload: 'Painting',
      
    },
]

And if I were to check off the first two options, I would like the resulting string to be: "Photography Writing"

Answer №1

To improve your model, update it to track the checked state and reduce the values to a concatenated string.

Include a new checked prop that is connected to a event.checked property.

 <input class="form-check-input" type="checkbox" value="{{event.upload}}" [checked]=“event.checked” id="flexCheckDefault">

Revise the model to match this structure:

testcases= [
{
  name: 'C001',
  upload: 'Photography',
  checked: false
},
{
  name: 'C002',
  upload: 'Writing',
  checked: false
},
{
  name: 'C003',
  upload: 'Painting',
  checked: false
},
]

Create a function that combines the checked values, as shown below

getConcatString(testCases) {
   return testCases
     .filter(x => x.checked)
     .map(x => x.upload)
     .join(‘ ‘);
}

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 installation process for Angular 4 on npm seems to be never-ending

Recently, I've been encountering difficulties while attempting to install the latest version of Angular 4. Despite upgrading my Node to 6.11.2 and npm to 3.10.10, the global installation of angular-cli is proving to be a time-consuming task with no su ...

How can we update a boolean value in an Angular service using a set function?

Hey there! I'm currently working on updating a boolean value in my service when a button is clicked within my component. My goal is to trigger the setfunction and toggle the boolean value from true to false, and vice versa when the button is clicked a ...

Using React to iterate through the child components of the parent

I have created a component that can accept either a single child or multiple children. Here is an example with multiple children: <SideDataGridItem> <div id='top'> <div>A1</div> <div>B1</div> ...

Mastering regular expressions in TypeScript

My goal is to perform linting on staged files that are either .ts or .tsx and located within the src folder. I am aware that for selecting all js files one can use "*.js": [--list of commands--] inside the lint staged property. I'm curious to learn m ...

Creating a dynamic dropdown menu triggered by a button click using Angular

I am a beginner in Angular (typescript) and I am facing some challenges in adding a new dropdown menu when a user clicks a button. My main struggle is creating additional attribute fields. I'm considering keeping track of the newly added dropdowns wit ...

Is it true that one must have 280 different dependencies in order to use angular2?

Currently, I am following the ng2 getting started tutorial outlined here. It mainly involves working with a default package.json and running npm install. The package.json specifically lists two dev dependencies, while the rest are essential first or secon ...

Leveraging Json data in Angular components through parsing

I am currently developing an angular application where I need to retrieve and process data from JSON in two different steps. To start, I have a JSON structure that is alphabetically sorted as follows: { "1": "Andy", "2": &qu ...

Exploring the typing for DefaultRootState in React Redux Connect

I'm currently in the process of upgrading to the latest versions of TypeScript, React, and Redux. However, I've encountered a compiler error when using the connect function in React Redux: According to the React Redux documentation, I typed my r ...

Is there a way to retrieve the current state of a Material UI component in a React functional component without needing to trigger an event by clicking on

Seeking a way to retrieve current values of Material Ui components without the need to click on any event after page reloads or DOM changes. These values are pulled from a database. My goal is to confirm whether the values have been updated or not by chec ...

Tips for showing an image through a button in Angular 4

Currently, I am in the process of creating a simple website and I have encountered an issue. When I click on a button to display an image, it works fine. However, when I click on another button to display a different image, the previous image remains visib ...

Sort through the files for translation by utilizing a feature within Typewriter

I am looking to implement Typewriter in a project that involves translating many C# files into TypeScript using WebEssentials. Is there a way to configure the template so that only class files containing a specific attribute are translated in this mann ...

What causes interface to generate TS2345 error, while type does not?

In the code below: type FooType = { foo: string } function fooType(a: FooType & Partial<Record<string, string>>) { } function barType(a: FooType) { fooType(a) } interface FooInterface { foo: string } function fooInterface(a: FooInt ...

Error encountered while utilizing the Extract function to refine a union

I am currently working on refining the return type of my EthereumViewModel.getCoinWithBalance method by utilizing the Extract utility type to extract a portion of my FlatAssetWithBalance union based on the generic type C defined in EthereumViewModel (which ...

Include quotation marks around a string in C# to convert it into JSON format

I am utilizing a service that operates with JSON format. However, the JSON data I am receiving does not include double quotes around keys and values. Here is an example of the data I have: [{name:{buyerfirstname:Randy, buyermiddlename:null, buyerlastnam ...

Discover the method of sending individual row data to a component using *ngFor in Angular 4

I need assistance with Angular as I am not very experienced in it. Here is the HTML code that I have: <tbody> <tr *ngFor="let data of employeeFilterLists"> <td>{{data.Code}}</td> <td (clic ...

Is there a way to turn off the "defer" feature in an Angular build?

After compiling my Angular project, I noticed that the compiler automatically adds the "defer" attribute to the script tag in my "index.html" file. However, I need to disable this feature. Is there a way to do it? I am currently working with Angular versi ...

How can I obtain the model values for all cars in the primary object?

const vehicles={ vehicle1:{ brand:"Suzuki", model:565, price:1200 }, vehicle2:{ brand:"Hyundai", model:567, price:1300 }, vehicle3:{ brand:"Toyota", model ...

Determining the typing of a function based on a specific type condition

I have created a unique type structure as shown below: type Criteria = 'Criterion A' | 'Criterion B'; type NoCriteria = 'NO CRITERIA'; type Props = { label?: string; required?: boolean; disabled?: boolean; } & ( | ...

What is the best way to delay an observable from triggering the next event?

In my Angular project, I am implementing RxJs with two subjects. s1.next() s1.subscribe(() => { // perform some operation and then trigger the event for s2 s2.next() }); s2.subscribe(() => { // perform some operat ...

The elixir-typescript compilation process encountered an error and was unable to complete

I am currently working on integrating Angular2 with Laravel 5.2 and facing an issue with configuring gulp to compile typescript files. Below is a snippet from my package.json file: { "private": true, "scripts": { "prod": "gulp --production", ...