Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

I am working on a simple form with checkboxes and I need to send only the checked boxes to TypeScript. However, when I attempt to save the data by clicking the save button, I encounter an error message {test: undefined}

Below is the form layout:

<ion-content>
  <ion-item *ngFor="let manager of managers; let i = index">
    <ion-checkbox
      color="primary"
      [(ngModel)]="manager.id"
      value="{{manager.id}}"
      style="margin-right: 10px"
    ></ion-checkbox>
    <ion-label>{{manager.name}}</ion-label>
  </ion-item>

  <ion-button (click)="save()">Save</ion-button>
</ion-content>

Here is the TypeScript code snippet:

  manager:any;
  constructor(private http: HttpClient) {}

  save(){
    let data ={
      test: this.manager,
    }
    console.log(data);
  }

Ultimately, my goal is to store the values of the checked checkboxes in an array in TypeScript.

Thank you for your help!

Answer №1

Initially, you can remove the value tag from your checkbox. [(ngModel)] will generate the entry selected in the object if it is selected afterward. You should then check the array when the button is pressed to confirm whether the element has a selected property AND(!) if it is true (checked).

Subsequently, you can save the value of the selected manager object in an array.

<ion-item *ngFor="let manager of managers; let i = index">
    <ion-checkbox
      color="primary"
      [(ngModel)]="manager.selected"
      style="margin-right: 10px"
    ></ion-checkbox>
    <ion-label>{{manager.name}}</ion-label>
  </ion-item>

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

Guide to populating a dropdown list using an array in TypeScript

I'm working on a project where I have a dropdown menu in my HTML file and an array of objects in my TypeScript file that I am fetching from an API. What is the best approach for populating the dropdown with the data from the array? ...

remove a specific element from an array

Hey there! I'm attempting to remove only the keys from an array. Here's the initial array: {everyone: "everyone", random: "random", fast response time: "fast response time", less conversations: "less conversatio ...

Challenges in integrating a PrimeNG Angular2 component with DynamicDialogRef, as well as the difficulties encountered when attempting to do

I am currently working on implementing a component that utilizes dynamic dialog and requires a direct usage. In the DynamicDialog example, there is a constructor in the car demo list component. constructor(private carService: CarService, public ref: Dynami ...

Troubleshooting issue with downloading files in Spring Boot and Angular 2

I've encountered an issue with downloading a file from Spring Boot using Angular2. The code snippet from Spring Boot originates from this Stack Overflow post about returning generated PDF using Spring MVC. Strangely, I can download the file directly ...

Securing a definitive URL for a web application hosted on Azure Static Web App for long-term use

Currently, I am in the process of developing an Azure-based application. The setup I have so far consists of: The frontend being Angular v16 and hosted on an Azure Static Web Site (running on Linux) The backend utilizing an ASP.NET Core 7 Web API hosted i ...

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

My task is to create clickable links within a paragraph of strings. I tried using a custom pipe, but seem to be missing something essential. Here's my attempt: import { Pipe, PipeTransform } from '@angular/core'; import { DecimalPipe ...

Setting up a ts-node project with ECMAScript modules. Issue: Unrecognized file extension ".ts"

I am currently in the process of setting up a minimalistic repository that incorporates ts-node and ESM for a project. Despite the existence of previous inquiries on this topic, I have encountered numerous outdated responses. Even recent answers appear to ...

What is the best way to configure the default entry point for a package.json file in a React

I'm having trouble with the default export in my package.json file. when I try to import: import { Component } from 'packagename/'; // size 22kb or import { Component } from 'packagename/dist' // size 22kb; but import { Component ...

How can I incorporate external libraries such as pdfmake into my Angular 8 application using a CDN?

I have successfully integrated the pdfmake library into my Angular 8 project for client-side PDF generation. However, I noticed that this third-party library is significantly increasing the build size of my Angular app. In order to reduce the build size, ...

Customizing output paths for script files in angular.json with Angular

Is there a way to set up the configuration in angular.json so that script files are output as shown in the directory tree below? Note: The file aaa.js has been renamed from main.js /assets/js/aaa.js ...

Input value not being displayed in one-way binding

I have a challenge in binding the input value (within a foreach loop) in the HTML section of my component to a function: <input [ngModel]="getStepParameterValue(parameter, testCaseStep)" required /> ... // Retrieving the previously saved v ...

Exploring the Applications of @NgModule

The new @NgModule system has me puzzled. In the past, I could easily specify a @Component's directive dependencies using the directives: [] attribute within the @Component meta object. For example: @Component({ /* ... */ }) export class Cmp1 {} @Com ...

Executing POST calls to a Google Apps Script

Everything was running smoothly. I managed to set up an endpoint using Google Apps Script that allowed end users to send a message to me (or another contact) and receive a copy of that message as well. The code for the POST request looked something like ...

Creating a FormArray with multiple dimensions in Angular 4: A step-by-step guide

For my dynamic form project, I am using the ng-formly npm tool to create a form with sections and tabs, all controlled by a single submit button. According to the library's documentation, I have defined an interface called TabType which specifies diff ...

The error at core.js:4002 is a NullInjectorError with a StaticInjectorError in AppModule when trying to inject FilterService into Table

While exploring PrimeNg Table control in my application - as a beginner in PrimeNg & Angular, I encountered an error No provider for FilterService! shown below: core.js:4002 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppMo ...

Angular compodoc tool is not considering *.d.ts files

Is there a way to make compodoc include .d.ts files in the documentation generation process for my Angular project? Even though I've added all .d.ts files to tsconfig.compodoc.json as shown below: { "include": [ "src/**/*.d. ...

Ways to simulate a service using get() method with a particular data structure

https://i.sstatic.net/zc7bu.pngI've been working on writing unit tests for my component and simulating a service that makes HTTP requests. The response data structure looks like this: { ContactActivityView :[ { Code:"AB", ...

Can the output object from an angular form validator be obtained and utilized?

As per the documentation, The validator is capable of returning an object {[key: string]: any} or null This implies that it can return an object (for any) which includes detailed information about what went wrong during validation. For example: function ...

Implementing a variable for an array in Angular 4: A step-by-step guide

I need help determining the correct value for skill.team[variable here].name in Angular, where all team names are retrieved from the skill. Below is the code snippet: HTML <select [(ngModel)]="skill.teams[1].name" name="teamName" id="teamName" class= ...

Issues with TypeScript "Compile on save" functionality in Visual Studio 2015

The feature of "Compile on save" is not functioning properly for me since I upgraded to Visual Studio 2015. Even though the status bar at the bottom of the IDE shows Output(s) generated successfully after I make changes to a .ts file and save it, the resul ...