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

Answer 1

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

Answer 2

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

Answer 3

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

(The below example could be upgraded using a single method with an other 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
}