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
– Sachin Shah, Commented Oct 17, 2018 at 9:29

Sudarshana Dayananda · Accepted Answer · 2018-10-17 10:07:17Z

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

edited Oct 17, 2018 at 10:07

answered Oct 17, 2018 at 10:00

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rogelio Over a year ago

Thanks this is more similar to what i was looking for

Nibin · Accepted Answer · 2018-10-17 09:42:46Z

1

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

answered Oct 17, 2018 at 9:42

Nibin

3,9602 gold badges22 silver badges40 bronze badges

1 Comment

Rogelio Over a year ago

Thank you! this taught me some new techniques for checking matboxes

Pratik Gadoya · Accepted Answer · 2021-02-27 14:27:47Z

0

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
}

edited Feb 27, 2021 at 14:27

Pratik Gadoya

1,4771 gold badge17 silver badges28 bronze badges

answered Oct 17, 2018 at 9:36

Logan Wlv

3,8147 gold badges37 silver badges63 bronze badges

1 Comment

Srikrushna Over a year ago

It will return true/false, not the value

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related