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

What is the best way to divide data prior to uploading it?

The solution to enabling Type checking in this scenario is simple: Begin by addressing the issue of "Not assignable," followed by resolving any

Update to using res.get() instead of res.getHeader()

When using *ngFor with AngularFireList, an error is thrown indicating an invalid

Tips for setting up the configuration of @typescript-eslint guidelines

Could you explain the meaning of the :host /deep/ selector?

Inquiry on SSGHelpers and GetStaticProps functionality with parameterization

Encountered an Angular 2 error: NullInjectorError - Http provider not found

Angular 6 Material now allows for the selection of a mat-tab-link by displaying an underlining bar

Dependencies of generic types among function arguments

Guide to setting up react-styleguidist, developing with Create React App, using Typescript, incorporating Material UI, and including

Ways to create a versatile function for generating TypedArrays instances

Sign up for the observable, retrieve the asynchronous mapped outcome with input from the dialog, and then utilize the outcome from the map

Exploring code coverage for the sortmethod in Angular applications

Redirect all traffic in Node.js/Express to an Angular 2 page

How to implement automatic clicking using Material Angular components

Encountered an issue while attempting to authenticate CMS signature using pkijs

Angular2 app hosted on firebase displaying an empty page

Angular 2 Universal Starter Kit - issue with importing 'ProvideRouter'

Attempting to eliminate any dates that have already occurred