Achieving checkbox values in Typescript: A guide

Question

Achieving checkbox values in Typescript: A guide

I need help with capturing the values of checked checkboxes and storing them in a string to use in my API. I want to retrieve the value if a checkbox is unchecked.

   <div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="group" (change)=""> 
       {{x.nom_groupe | uppercase}}
  </div>

I am unsure of the method or approach I should take in TypeScript to achieve this. Any guidance would be greatly appreciated.

This is an updated version

<div class="form-check" *ngFor="let x of groupesTable">
               <label class="form-check-label" for="check1">
               <input type="checkbox" class="form-check-input" nom="check1"  [value]= "x.nom_groupe"
               name="x.nom_groupe" (change)="callMe($event, x.nom_groupe)"  [(ngModel)]="grp">{{x.nom_groupe | uppercase}}
               </label>
</div>

In the .ts file, I have implemented this function:

 callMe(event, nom) {
if (event.target.checked) 
  {
    console.log(nom);
    this.nomgrps=this.nomgrps+nom.toUpperCase()+" ";
    console.log(this.nomgrps); 
  }
  else {
    console.log(this.nomgrps);
  }}

However, it seems like the functionality is not working as expected. Please assist me in troubleshooting why all checkboxes are getting checked when only one is selected.

angular typescript

Answer 1

Answer №1

To ensure consistency, all the checkboxes are checked or unchecked together because they are linked to the same variable: grp. You can either create an array of new form models to manage the checked checkboxes or dynamically add a new property checked within the loop.

For example:

<div *ngFor="let x of groupesTable">
      <input type="checkbox"  [(ngModel)]="x.checked" (change)="foo()"> 
      {{x.nom_groupe | uppercase}}
</div>


foo() {
  let checkedStrings = this.groupesTable.reduce((acc, eachGroup) => {
    if (eachGroup.checked) {
      acc.push(eachGroup.nom_groupe.toUpperCase())
    }
    return acc
  }, []).join(" ")

  console.log(checkedStrings);
}

https://stackblitz.com/edit/angular-dj95pg?file=src%2Fapp%2Fapp.component.ts

Answer 2

To ensure consistency, all the checkboxes are checked or unchecked together because they are linked to the same variable: grp. You can either create an array of new form models to manage the checked checkboxes or dynamically add a new property checked within the loop.

For example:

<div *ngFor="let x of groupesTable">
      <input type="checkbox"  [(ngModel)]="x.checked" (change)="foo()"> 
      {{x.nom_groupe | uppercase}}
</div>


foo() {
  let checkedStrings = this.groupesTable.reduce((acc, eachGroup) => {
    if (eachGroup.checked) {
      acc.push(eachGroup.nom_groupe.toUpperCase())
    }
    return acc
  }, []).join(" ")

  console.log(checkedStrings);
}

https://stackblitz.com/edit/angular-dj95pg?file=src%2Fapp%2Fapp.component.ts

Answer 3

Answer №2

When dealing with checkboxes, they can only have two values: true or false. Therefore, you will need an array to store these values. If your groupesTable is an array of objects, you can directly use the object "groupesTable". Otherwise, you will need to store the values in an array.

<div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="x.checked"> 
       {{x.nom_groupe | uppercase}}
</div>

//or
//declare in your .ts
checkes:boolean[]=[]
//and in your .html
<div *ngFor="let x of groupesTable;let i=index">
      <input type="checkbox"  [(ngModel)]="checkes[i]"> 
       {{x.nom_groupe | uppercase}}
</div>

To retrieve the selected values, you simply need to access the array. Create a function like this:

If your groupesTables is an array of objects, for example

[{id_groupe:0,nom_groupe:'...'},{id_groupe:1,nom_groupe:'...'},..]

Your function could look something like this:

getValuesChecked()
{
  return groupesTable.filter(x=>x.checked).map(x=>x.id_groupe).join(",")  
}
//or 
getValuesChecked()
{
  return groupesTable.filter((x,index)=>this.checkes[index])
       .map(x=>x.id_groupe).join(",")  
}

You can call this function on each change (using ngModelChange), but it's also possible to call it before submitting the data.

Answer 4

When dealing with checkboxes, they can only have two values: true or false. Therefore, you will need an array to store these values. If your groupesTable is an array of objects, you can directly use the object "groupesTable". Otherwise, you will need to store the values in an array.

<div *ngFor="let x of groupesTable">
       <input type="checkbox"  [(ngModel)]="x.checked"> 
       {{x.nom_groupe | uppercase}}
</div>

//or
//declare in your .ts
checkes:boolean[]=[]
//and in your .html
<div *ngFor="let x of groupesTable;let i=index">
      <input type="checkbox"  [(ngModel)]="checkes[i]"> 
       {{x.nom_groupe | uppercase}}
</div>

To retrieve the selected values, you simply need to access the array. Create a function like this:

If your groupesTables is an array of objects, for example

[{id_groupe:0,nom_groupe:'...'},{id_groupe:1,nom_groupe:'...'},..]

Your function could look something like this:

getValuesChecked()
{
  return groupesTable.filter(x=>x.checked).map(x=>x.id_groupe).join(",")  
}
//or 
getValuesChecked()
{
  return groupesTable.filter((x,index)=>this.checkes[index])
       .map(x=>x.id_groupe).join(",")  
}

You can call this function on each change (using ngModelChange), but it's also possible to call it before submitting the data.

Answer 5

Answer №3

Implement ngModelChange Functionality:

HTML Code:

<div *ngFor="let item of groupItems">
   <input type="checkbox"  [(ngModel)]="group" (ngModelChange)="updateSelection(object, $event)"> 
   {{item.group_name | uppercase}}
</div>

Typescript Code:

public selectedItems = [];

updateSelection(object: any, isChecked: boolean){
    if(isChecked) this.selectedItems.push(object);
    else this.selectedItems = removeItem(this.selectedItems, object);

    showSelectedCheckboxes();
}

showSelectedCheckboxes(){
    this.selectedItems.forEach(function(element) {
        console.log(element);
    });
}

removeItem(arr, value) {
    return arr.filter(function(ele){
        return ele != value;
    });
}

Answer 6

Implement ngModelChange Functionality:

HTML Code:

<div *ngFor="let item of groupItems">
   <input type="checkbox"  [(ngModel)]="group" (ngModelChange)="updateSelection(object, $event)"> 
   {{item.group_name | uppercase}}
</div>

Typescript Code:

public selectedItems = [];

updateSelection(object: any, isChecked: boolean){
    if(isChecked) this.selectedItems.push(object);
    else this.selectedItems = removeItem(this.selectedItems, object);

    showSelectedCheckboxes();
}

showSelectedCheckboxes(){
    this.selectedItems.forEach(function(element) {
        console.log(element);
    });
}

removeItem(arr, value) {
    return arr.filter(function(ele){
        return ele != value;
    });
}

Achieving checkbox values in Typescript: A guide

Answer №1

Answer №2

Answer №3

Similar questions

Error: Ionic 2 encountered an error: Highcharts has produced Error #17 - learn more at www.highcharts.com/errors/17

Solving the issue of localizing the Datetime picker

Executing the Ionic code within the Xcode Swift environment

Replacing a component dynamically within another component in Angular 2

Validating a single field name with various DTO types based on conditions in a NestJS application

Choose does not showcase the updated value

Unable to retrieve iFrame window due to an error

Is it possible to verify type property names using a union type?

Leverage ngrx to streamline action creation for multiple feature modules

Display Angular code and HTML within an Angular webpage without it being rendered

Design: Seeking a layout feature where one cell in a row can be larger than the other cells

Troubleshooting Angular2: Issues with ngModel functionality within an ngIf directive

What is the best way to limit a property and template literal variable to identical values?

Exploring Angular: Looping through an Array of Objects

Executing multiple HTTP requests in Angular using the HttpClient

How can I pass Checkbox values to a function in the component in Angular 2?

convert a JSON object into an array field

In response to resolving an HTTP header issue with a status of 200 ok during API testing with Postman, what steps can be taken

Tips for aligning the types of objects transmitted from a Web API backend to a React/Redux frontend

What could be the reason for my provider loading the data twice?