How do I get the checked and unchecked values of a checkbox in angular

Question

I have a list of checkboxes as shown below:

 <div class="col-md-4 md-padding"  *ngFor="let node of nodeList; let j=index;">
              <md-checkbox>
                <md-checkbox
                  class="md-h6 row md-padding--xs"
                  name="{{node.abc}}"
                  label="{{node.abc}}"
                  value="{{node.abc}}"
                  required="true"
                  htmlId="filter_label_{{j}}"
                  (click)="updatefilter(node.abc)"
                  [formControlName]="servers"
                  [(ngModel)]="node.selected">
                </md-checkbox>


              </md-checkbox-group>


            </div>

I have to check if the checbox is checked or unchecked. How do I proceed?

node.selected is not working. I tried it. I am not able to get the selected value. — pranami
– pranami, Commented Jun 9, 2021 at 17:08

Apoorva Chikara · Accepted Answer · 2021-06-09 18:18:15Z

1

It seems the node itself doesn't have the selected property, first create one on node interface or node object.

Secondly add the change event on the checkbox whenever user clicks on the checkbox change will be called and you can toggle the value for node.selected.

In Html file:

 <md-checkbox
                  class="md-h6 row md-padding--xs"
                  name="{{node.FQDN}}"
                  label="{{node.FQDN}}"
                  value="{{node.FQDN}}"
                  required="true"
                  htmlId="filter_label_{{j}}"
                  (click)="updatefilter(node.FQDN); updateSelection(node)"
                  [(ngModel)]="node.selected">
                </md-checkbox>

In TS file:

public updateSelection(node) {
     // update the values to make them persistent
     node.selected = node.selected ? false : true;
}

edited Jun 9, 2021 at 18:18

answered Jun 9, 2021 at 17:32

Apoorva Chikara

8,8033 gold badges24 silver badges39 bronze badges

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

4 Comments

pranami Over a year ago

Thanks for the answer. But the change property doesn't seem to work. I tried to do a console.log on the updateSelection function , but doesn't display the console.log

Apoorva Chikara Over a year ago

I have removed change and added method to click check now.

Eliseo Over a year ago

@ApoorvaChikara, never use [(ngModel)]and [formControlName] in the same tag. Really is not allowed in Angular, so I don't know how can work the code

Apoorva Chikara Over a year ago

I just removed that. You can check this, does it make any sense? You should not use both when you create forms in angular, however angular doesn't throw an error. One is recommended over the other when creating reactive or template driven form.

Collectives™ on Stack Overflow

How do I get the checked and unchecked values of a checkbox in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related