CODEWITHSUNDEEP
angulartypescript
Med Anis
Med Anis

Reputation: 297

How to get checked checkboxes values in Typescript

I'm trying to get the values of checked checkboxes and put them into a strig , that string will be used in my api. I want to get the values once the checkbox is checked and retrieve the value if that checkbox is unchecked.

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

I've no idea how to do that or what method should I use in typescript. Any help would be appreciated.

This is an update 

<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>

and in the .ts file i did this 

 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);
  }}

But this also doesn't work , i don't know why it checks all the checkboxes while i only check one.

Upvotes: 4

Views: 14790

Answers (3)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

It checks and unchecks all the boxes together because all your formControls are bound to the same variable: grp. Either create an array of new form models which you can use to get the checkboxes which are checked or you use the object in the loop by adding a new property checked on it on the fly.

Something like:

<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

Upvotes: 4

Eliseo
Eliseo

Reputation: 57939

Med, a checkbox can get only two values: true or false. So you need an array to store the values. If your groupesTable is an array of objects, you can use the own object "groupesTable". else you need 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 your .html
<div *ngFor="let x of groupesTable;let i=index">
      <input type="checkbox"  [(ngModel)]="checkes[i]"> 
       {{x.nom_groupe | uppercase}}
</div>

When you want to get the values selected you only need use the array. Make a function

if your groupesTables is an array of object,e.g.

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

Your function can look like as 

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 to the function each change (using ngModelChange) but you can simply call the function before submit the data

Upvotes: 0

David
David

Reputation: 668

Use ngModelChange:

html:

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

typescript:

public inputs = [];

change(obj: any, check: boolean){
    if(check) this.inputs.push(obj);
    else this.inputs = arrayRemove(this.inputs, obj);

    displayCheckBoxes();
}

displayCheckBoxes(){
    this.inputs.forEach(function(element) {
        console.log(element);
    });
}

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

Upvotes: -1

Related Questions