I have a problem with getting values of checkbox in angular. Here is the snippet:

<div class="list-group-item" *ngFor="let ticket of tickets">
   <input
      type="checkbox"
      [name]="ticket.id"
      [id]="ticket.id"
      [value]="ticket.id"
      formControlName="ticketTypes"
   />
   <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

I am getting above checkbox's value as true. How to get checkbox value correctly ?

Here is a stackblitz

I have a problem with getting values of checkbox in angular. Here is the snippet:

<div class="list-group-item" *ngFor="let ticket of tickets">
   <input
      type="checkbox"
      [name]="ticket.id"
      [id]="ticket.id"
      [value]="ticket.id"
      formControlName="ticketTypes"
   />
   <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

I am getting above checkbox's value as true. How to get checkbox value correctly ?

Here is a stackblitz

• javascript
• angular
• typescript
• angular7

Share Improve this question Follow edited Nov 7, 2019 at 12:06 batgerel.e asked Nov 7, 2019 at 10:56 batgerel.ebatgerel.e 85722 gold badges1010 silver badges3232 bronze badges 4

• Are you using ngForm or Reactive Forms? – Gangadhar Gandi Commented Nov 7, 2019 at 10:58
• @GangadharGandi i am using reactive form. – batgerel.e Commented Nov 7, 2019 at 10:59
• Please paste the code of ponent.ts as well – Gangadhar Gandi Commented Nov 7, 2019 at 10:59
• Hey you can check stackblitz./edit/angular-forms-checkbox or stackblitz./edit/angular-checkbox-example – Pardeep Jain Commented Nov 7, 2019 at 11:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use (change) which fires every time when change detects on the input element and then write a custom logic to get the checked items from list, for example:

HTML:

<div class="list-group-item" *ngFor="let ticket of tickets">
    <input type="checkbox" [name]="ticket.id" [id]="ticket.id" [value]="ticket.id" (change)="onCheck(ticket.id)"/>
    <label for="{{ ticket.id }}">{{ ticket.name }}</label>
</div>

<pre>{{tickets | json}}</pre>

TS Code:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.ponent.html",
  styleUrls: ["./app.ponent.css"]
})
export class AppComponent {
  tickets = [{ id: 1, name: "Test1" }, { id: 2, name: "Test2" }];

  checkedTickets = [];

  onCheck(evt) {
    if (!this.checkedTickets.includes(evt)) {
      this.checkedTickets.push(evt);
    } else {
      var index = this.checkedTickets.indexOf(evt);
      if (index > -1) {
        this.checkedTickets.splice(index, 1);
      }
    }
    console.log(this.checkedTickets);
  }
}

Working Demo

In such scenarios better/remended to use formArray if you are dealing with the form or you can use simply ngModel two way data binding of Angular.

 <form [formGroup]="form" (submit)="submit(form.value)">
  <div *ngFor="let s of addOns.controls; let j=index">
   <input type="checkbox" [formControl]="s"/> {{user1.addOns[j].name}}
  </div>
 </form>

Also simply formControlName i.e single control is generally used while dealing with Radio Buttons because in that case user can select always single value but here in case of checkboxes you can select multiple entries as well, which is designed like this, So you might use array in that case like above in my example.

Working Example

Or in case you want to use ngModel you can use it like this -

<ul>
    <li *ngFor="let item of list">
    <input type="checkbox" [(ngModel)]="item.checked">{{item.title}}
  </li>
</ul>

Working Example