Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 is there a way to use a two way binding with a checkbox?

I want to use a two way binding for a checkbox, but if I use the [(ngModel)] it is showing true or false instead of the value of the checked item. Does anybody know how this is done?

If i want to use a two way binding and set it to "expression.value" in my case how do i do that:

<input type="checkbox" type="checkbox"/>&nbsp;Option 1</a></li>

I would like to bind the value of the checkbox in this case: Option 1 into the expression class.

like image 247
Sireini Avatar asked Dec 08 '25 16:12

Sireini


1 Answers

This is a known issue

  • https://github.com/angular/angular/issues/3406,
  • https://github.com/angular/angular/issues/6311

There are different workarounds like using event.target.checked instead of the value from the model.

You can use

<input type="checkbox"  
    (change)="expression && expression.Option1=$event.target.checked ? true : undefiend"
    [ngModel]="expression?.Option1">
<input type="checkbox"  
    (change)="expression && expression.Option2=$event.target.checked ? true : undefiend"
    [ngModel]="expression?.Option2">

Plunker example

like image 85
Günter Zöchbauer Avatar answered Dec 11 '25 13:12

Günter Zöchbauer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!