1
votes

Comment obtenir les valeurs des cases à cocher cochées dans Typescript

J'essaie d'obtenir les valeurs des cases à cocher cochées et de les mettre dans une strig, cette chaîne sera utilisée dans mon api. Je veux obtenir les valeurs une fois que la case est cochée et récupérer la valeur si cette case n'est pas cochée.

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

Je ne sais pas comment faire cela ni quelle méthode dois-je utiliser dans le typographie. Toute aide serait appréciée.

Ceci est une mise à jour

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

et dans le fichier .ts je l'ai fait

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

typescript angular

0 commentaires

3 Réponses :

-1
votes

Utilisez ngModelChange:

html:

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

typecript:

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

6 commentaires

non cela ne fonctionne pas, il coche ou décoche toutes les options lorsque je ne coche qu'une seule case, et ce que je veux vraiment faire est de concaténer les valeurs des cases à cocher cochées

pourquoi ne pas simplement ajouter l'obj à un tableau dans la fonction de changement si check == true ou supprimer si check == false et ensuite obtenir tous les éléments du tableau?

En fait, je n'ai aucune idée de comment faire cela, et les éléments que j'affiche sont fournis à partir d'une base de données

J'ai mis à jour le code dactylographié pour vous montrer un exemple de ce que je veux dire. Les données affichées fournies par la base de données ne devraient pas affecter le code car elles prennent la valeur html de la case à cocher

Je vais essayer le code que vous avez fourni, mais il coche toutes les cases lorsque je n'en coche qu'une seule, avez-vous une idée de pourquoi? @David

vérifiez ce fil de discussion stackoverflow.com/ questions / 45098169 /…

0
votes

Med, une case à cocher ne peut avoir que deux valeurs: true ou false. Vous avez donc besoin d'un tableau pour stocker les valeurs. Si votre groupeTable est un tableau d'objets, vous pouvez utiliser le propre objet "groupesTable". sinon, vous devez stocker les valeurs dans un tableau.

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(",")  
}

Lorsque vous voulez obtenir les valeurs sélectionnées, il vous suffit d'utiliser le tableau. Créez une fonction

si votre groupesTables est un tableau d'objets, par exemple

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

Votre fonction peut ressembler à

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

0 commentaires

2
votes

Il coche et décoche toutes les cases ensemble car tous vos formControls sont liés à la même variable: grp . Soit vous créez un tableau de nouveaux modèles de formulaires que vous pouvez utiliser pour obtenir les cases à cocher qui sont cochées, soit vous utilisez l'objet dans la boucle en ajoutant une nouvelle propriété cochée à la volée.

Quelque chose comme:

<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

1 commentaires

@MedAnis veuillez noter que la clé supplémentaire cochée est créée sous les objets dans groupesTable . Si vous ne voulez pas cela, ayez un tableau dans votre ts qui contiendra une variable par objet du groupsTable, chaque variable sera maintenant utilisée pour se lier à chacune des cases à cocher