Angular 7: Checkbox is checked with [(ngModel)] on ngoninit method

Question

I am calling the function below into ngoninit and binding a checkbox value with ngmodel. Here the problem is that the default checkbox is coming back as checked. I don't get where I am wrong.

Json format: [{subproducts:[{checked:true}}]]

<label for="checkbox" class="checkbox">  
  <input id="checkbox" type="checkbox" value=" 
  {{newsubProduct[0].product}}" [(ngModel)]="newsubProduct[0].checked" [ngModelOptions]="
  {standalone: true}" /> <i class="skin"></i><span> 
  {{ newsubProduct[0].product }}</span>
</label>

listproduct() {
this.Service.getData("some api").subscribe((d) => {
        let mydata = d;
        this.result = mydata;
        this.selProducts = this.result;
        for (var i = 0; i < this.selProducts.length; i++) {
            let p1 = this.selProducts[i].subProducts.filter(p => p.checked);
            if (!_.isEmpty(p1)) {
                let p2 = p1.filter(p => {
                    if (p.checked) {
                        var checked = p.checked;
                        var product = p.backEndName;
                        this.newsubProduct.push({
                            checked: checked,
                            product: product
                        });
                    }
                });
            }

        }

    },
    err => {
        this.result = err;
    });}

The problem is that the checkbox is checked, I expect it to be unchecked.

checkbox value should take from api as false or true which is not happening... — DharamChauhan, Sep 14 '19 at 15:56
The json format that you shared is the one that is coming from api? — Adrita Sharma, Sep 14 '19 at 15:57
[ { "id":1, "subProducts":[ { "id":100, "checked":"false", "backEndName":"DDA" } ] — DharamChauhan, Sep 14 '19 at 16:00

score 0 · Accepted Answer · answered Sep 15 '19 at 15:42

0

We can see from your comment, that your data looks like:

[ { "id":1, "subProducts":[ { "id":100, "checked":"false", "backEndName":"DDA" } ] } ]

So what we are seeing is that your get string value, not boolean. If you have access to the api, I would suggest that make the change there to return an actual boolean, not a string value. But if you can't do that change, you need to give the checkbox the boolean value. That can be done like here.

So make the following change:

this.newsubProduct.push({
  checked: (checked === 'true'),
  product: product
});

Now it should work: STACKBLITZ

answered Sep 15 '19 at 15:42

AT82

71,416
24
140
167

Thank you so much for the great answer. it's working fine. – DharamChauhan Sep 16 '19 at 07:51
Great, glad I could help! :) – AT82 Sep 16 '19 at 08:05

Angular 7: Checkbox is checked with [(ngModel)] on ngoninit method

1 Answers1