web-dev-qa-db-fra.com

Comment accéder à plusieurs valeurs de cases à cocher dans Angular 4/5

Je veux obtenir les valeurs de mes cases à cocher mais je ne peux obtenir que vrai ou faux.

Voici mon modèle:

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

Voici mon composant

this.categories$ = this.storeService.getAllCategories().pipe(
    map(result => (result as any).data),
    tap(r => console.log(r))
)

Mon composant obtient essentiellement une liste des catégories à partir d'une API externe

 enter image description here

angularcheckboxangular-forms
5
user5431121

Vous pouvez utiliser les événements de changement avec le contrôle de case à cocher comme ci-dessous,

<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}" (change)="onChangeCategory($event, cat)">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

À partir du fichier composant.ts,

    tempArr: any = { "brands": [] };

    onChangeCategory(event, cat: any){ // Use appropriate model type instead of any
      this.tempArr.brands.Push(cat.name);

    }
4
Srini

Essaye ça

<div class="form-check" *ngFor="let cat of categories">
    <input class="form-check-input" (change)="onChange(cat.name, $event.target.checked)"name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

onChange(email:string, isChecked: boolean) {
      if(isChecked) {
        this.emailFormArray.Push(email);
      } else {
        let index = this.emailFormArray.indexOf(email);
        this.emailFormArray.splice(index,1);
      }
  }

exemple de travail

7
Pardeep Jain

Vous voulez obtenir des valeurs à partir des cases à cocher. La case à cocher représente un booléen. Donc, obtenir true et false est ce que vous devriez obtenir.

0
pbialy