Angular 6 How To Get Values From Multiple Checkboxes and Send in From

Question

I'm trying to use mat-checkboxes as input in my form, but can't really find anything on docs regarding it.

Html

<section class="checkbox-section">
 <mat-checkbox [(ngModel)]="bChecked">Blogs</mat-checkbox>
 <mat-checkbox [(ngModel)]="wChecked">Web</mat-checkbox>
 <mat-checkbox [(ngModel)]="oChecked">Online News</mat-checkbox>
 </section>

Typescript

    public form = {
    name: null,
    email: null,
    birthday: null,
    company: null,
    interests: [],
    newsletter: null,
    address: null,
    password: null,
    password_confirmation: null,
  };

I'm trying to get the values of the checkboxes which are static and then push to my interests array

If value is static then you can do without bind checkbox with ngModel , You can use click event and based on that just pass value to your function. — Sachin Shah, Oct 17 '18 at 09:29

score 1 · Answer 1 · answered Oct 17 '18 at 09:42

I don't know if this might suit your requirement, but from what I understand all you need to do is change your code to something like this to get an info on which of the checkboxes are actually checked.

Typescript

public form = {
    ...
    interests: {
      blogs: false,
      web: false,
      onlineNews: false,
    },
    ...
  };

HTML

<section class="checkbox-section">
    <mat-checkbox [(ngModel)]="form.interests.blogs">Blogs</mat-checkbox>
    <mat-checkbox [(ngModel)]="form.interests.web">Web</mat-checkbox>
    <mat-checkbox [(ngModel)]="form.interests.onlineNews">Online News</mat-checkbox>
 </section>

I don't know how pushing the value true or false to any array makes any sense or give information on which input is checked.

Stackblitz demo

Thank you! this taught me some new techniques for checking matboxes — Rogelio, Oct 17 '18 at 13:06

Sudarshana Dayananda · Accepted Answer · 2018-10-17T10:07:17.280

Change your HTML as below.

<section class="checkbox-section">
  <mat-checkbox [(ngModel)]="bChecked" (change)="onCheckboxChagen($event, 'Blogs')">Blogs</mat-checkbox>
  <mat-checkbox [(ngModel)]="wChecked" (change)="onCheckboxChagen($event, 'Web')">Web</mat-checkbox>
  <mat-checkbox [(ngModel)]="oChecked" (change)="onCheckboxChagen($event, 'Online News')">Online News</mat-checkbox>
  </section>

As you need to use static label for checkbox value, you can pass a static label as the second argument to the onCheckboxChagen method. According to the value of the checkbox you can push and pop elements from the interests array.

TS changes should be as below.

  onCheckboxChagen(event, value) {

    if (event.checked) {

      this.interests.push(value);
    } 
    if (!event.checked) {

      let index = this.interests.indexOf(value);

      if (index > -1) {

        this.interests.splice(index, 1);
      }
    }
  }

Working Demo

Thanks this is more similar to what i was looking for – Rogelio Oct 17 '18 at 11:35 — Rogelio, Oct 17 '18 at 11:35

score 0 · Answer 3 · edited Feb 27 '21 at 14:27

You can add a change event on each of your mat-checkbox and call the following method to fullify your array:

(The below example could be upgraded using a single method with another parameter to know which checkbox had a change event)

<section class="checkbox-section">
 <mat-checkbox [(ngModel)]="bChecked" (change)="assignValues1($event)">Blogs</mat-checkbox>
 <mat-checkbox [(ngModel)]="wChecked" (change)="assignValues2($event)">Web</mat-checkbox>
 <mat-checkbox [(ngModel)]="oChecked" (change)="assignValues3($event)">Online News</mat-checkbox>
 </section>

In my example to access the new boolean value you can do like this :

assingValues1(event: MatCheckboxChange) {
var newVal = event.checked;
// your code here
}

It will return true/false, not the value – Srikrushna Mar 14 '20 at 19:37 — Srikrushna, Mar 14 '20 at 19:37

Angular 6 How To Get Values From Multiple Checkboxes and Send in From

3 Answers3

Linked