How to store selected checkbox value in Angular 4?

Question

I need an array with selected checkbox values.

This is my html:

<form [formGroup]="form" class="charts">
    <label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
        <input type="checkbox" value={{chart.title}} (change)="selected_chart($event)">
        {{chart.title}}
        <span class="checkmark"></span>
    </label>
</form>

And my function is:

selected_chart(e) {
    if (e.target.checked) {
        this.c_value = e.target.value;
        this.charts_selected.push(this.c_value);
    }
}

I have the array, but when we deselect the value still there; how to pop that value from the array? Any help will be appreciated

Answer 1

You can use $event.srcElement in chnage like this

<input type="checkbox" (change)="selected_chart($event.srcElement)">

and get value with input: HTMLInputElement

selected_chart(input: HTMLInputElement) {
    input.checked === true
      ? console.log('true')
      : console.log('false');
  }

test on stackblitz

Answer 2

You can use $event to detect the change

 <label> Checkbox 1</label>
<input type="checkbox" name="checkbox1" (change)="selected_chart($event)">
<label> Checkbox 2</label>
<input type="checkbox" name="checkbox2" (change)="selected_chart($event)">
<br>
<label> Check box Status</label>
  Check box 1 : {{selected_checkbox.checkbox1}}
<br>  
  Check box 1 : {{selected_checkbox.checkbox2}}

Create an object in component.ts so that you can toggle the change event

selected_checkbox = {};
   selected_chart(event) {
     this.selected_checkbox[event.target.name] = event.target.checked;
  }

Checkout the Stackblitz Example

Answer 3

Can't you use something like this?

<form [formGroup]="form" class="charts">
<label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
  <input type="checkbox" value={{chart.title}} [(ngModel)]="chart.checked">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

Then each item of charts array will have the corresponding checked attribute. When you want to calculate charts_selected array you can iterate charts array and do that as below.

  calculateSelectedArray() {
for (const chart of this.charts) {
    if (chart.checked) {
    this.charts_selected.push(chart.something);
    }
}

}

Answer 4

So I just notice this way could help.
You should save your checkbox by the position of the current title, right now your code is to push the boolean into the array, which couldn't tell you what value it stand for actually.
So we could simply save the value into the array like this:

 <form [formGroup]="form" class="charts">
  <label formArrayName="charts" *ngFor="let chart of charts; ; let i = index" id="form_charts">
  <input type="checkbox" value={{chart.title}} (change)="selected_chart(i)">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

selected_chart(i: number) {
  this.selected_checkbox[i] = !this.selected_checkbox[i];
}

Whenever you select the checkbox, we just simply reverse its value in the array.

Answer 5

selected_chart(e) {
    if (event.target.checked) {
      this.c_value = e.target.value;
      this.charts_selected.push(this.c_value);
    } else {
      this.c_value = e.target.value;
      const index = this.charts_selected.findIndex(item => item === c_value );
      this.charts_selected.splice(index);
    }
}

You can try this way... if you unchecked any value it will go into else block and remove that from array.