Checkbox not getting checked/unchecked as expected

user_8760028 0
Viewed 265

I have a list of checkboxes as shown below:

<div class="col-md-4 md-padding-s"  *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_{{a}}_{{j}}"
                      (ngModelChange)="updateSelection(node)"
                      [formControlName]="servers"
                      [(ngModel)]="node.selected">
                    </md-checkbox>
                  </md-checkbox-group>
                </div>

Now, the checkbox has to be checked or unchecked based on node.selected value. But what is happening is when I click on the checkbox text the node.selected value has to change based on updateSelection function which is currently happening. But the checkbox is not getting checked or unchecked when I click on the surrounding text. Only if I click on the checkbox , the value is getting checked/unchecked. Where am I going wrong?

angular checkbox
1 Answers

You will need to provide a new refernce to node object for the changes to reflect in the UI.

 updateSelection(node) {
         console.log('node', node)
        node.selected = node.selected ? false : true;
// here add this 
node = {...node}
        if(node.selected) {
          this.serverList.push(node.FQDN);
          this.isServerSelected = true;
        }else{
          this.serverList.pop();
          this.serverList = this.serverList.filter((x, i, a) => a.indexOf(x) == i)
          if(this.serverList.length == 0) {
            this.isServerSelected = false;
            this.alertService.error('Error', 'Please select atleast 1 server', this.alertConfig);
          }
        }
    }
user_16109390
Related