CODEWITHSUNDEEP
angulartypescript
NJKannur
NJKannur

Reputation: 91

How to store selected checkbox value in Angular 4?

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

Upvotes: 0

Views: 7137

Answers (5)

user18370497
user18370497

Reputation: 1

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.

Upvotes: 0

lupa
lupa

Reputation: 527

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.

Upvotes: 0

Malindu Sandaruwan
Malindu Sandaruwan

Reputation: 1517

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

}

Upvotes: 0

Akhil Aravind
Akhil Aravind

Reputation: 6130

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

Upvotes: 0

Mohammad Daliri
Mohammad Daliri

Reputation: 1406

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

Upvotes: 1

Related Questions