angular2 checkbox ng-model not updated

Question

I am trying a simple thing with Angular 2.0 I want a bind a model to an 'input checkbox', register the 'change' with a method, have the method executed when the checkbox state is changed and act based on the state of the model. Everything works but, when the method linked with the change event is executed, the state of the model is the contrary of what I expect, i.e. is false when the checkbox is selected, is true when the checkbox is unselected. Here is the code snippet;

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange(object.selected)">

Any idea about what I am doing wrong?

Answer 1

As of angular2.beta8 this simple trick will do

<input type="checkbox" [(ngModel)]="object.selected" />

---

From Angular 4, must add the name attribute for this to bind.

<input type="checkbox" [(ngModel)]="object.selected" name="element_name"/>

Answer 2

A way to do it without ngModel

<input
    id="{{fieldId}}"
    type="checkbox"
    [checked]="displayValue"
    (click)="setDisplayValue($event.target.checked)"
>

displayValue would be getter/setter setDisplayValue() method will update the record and hence displayValue would be updated

Answer 3

For me only works when I used (ngModelChange):

<input type="checkbox" 
       [(ngModel)]="object.selected" 
       (ngModelChange)="onChange(object.selected)">

If I use (change) or (click) the state is always contrary of what I expect, as you said

Answer 4

I have implemented it like this: <input #angularcb type="checkbox" (change)="angular = angularcb.checked" />

You can also see more details and a live demo here: http://www.syntaxsuccess.com/viewarticle/input-controls-in-angular-2.0 http://www.syntaxsuccess.com/angular-2-samples/#/demo/input

Answer 5

<input type="checkbox" [ngModel]="object.selected == 'Y'" (ngModelChange)="object.selected=$event?'Y':'N'"> 

Answer 6

You can also try and inspect the event object and just pull out the checked parameter

<input value={{object.name}} type="checkbox" [(ng-model)]="object.selected" (change)="onChange($event)">


 onChange(event) {
  var isChecked = event.currentTarget.checked;
 }

• seems like the event is being fired before the model gets a chance to update. It currently works fine for my select elements.

Answer 7

try this out

app.html

 <span *ngFor="#ca of classArray; #i=index">                                         
   <input type="checkbox"  id="{{ca.id}}" #cv [checked]=false                                       
    (change)="onChange(ca.id,cv.checked)">
         {{ca.class_name}},{{cv.checked}} <br>
 </span>

app.ts

 onChange(classId,flag){
        console.log(classId+" : "+flag);
   }

Answer 8

Try like this.

<input type="checkbox" [checked]="object.completed" (change)="object.completed = !objected.completed" >

Answer 9

Don't forget to include a name or the checkbox will not update and you will get an error on the console.

<label>Sign on<input type="checkbox" name='showLogin2' [(ngModel)]="model.ShowLogin" ></label>

Answer 10

Angular 2.x.x stable : easy way to know a checkbox is checked or not :

<input type="checkbox" #checkbox (change)="check(checkbox.checked)">

ts:

export class component{
  constructor() {}

  check(checked){

    if(checked){
      // checked
    }else{
      // not checked
    }
  }

Answer 11

just write checked in tag of input type :

<input type="checkbox" name="abc" checked />

Answer 12

<input type="checkbox" [(ngModel)]="object.selected" />
<div>{{object | json}}</div>

Answer 13

Input

<input type="checkbox" (change)="selectionChange($event.srcElement)">

Change Event

selectionChange(input: HTMLInputElement) {
    input.checked === true
      ? doSomethingIfTrue()
      : doSomethingIfFalse();
}

Answer 14

<input value={{object.name}} type="checkbox" [(ngModel)]="object.selected" (change)="onChange(object.selected)" [ngModelOptions]="{standalone: true}">

Form is just a set of key/value pairs. Name is the key which is used to identify/get/set the value of this control, so you need to specify the name of each control. When you set ngModelOptions="{standalone: true}" you tell angular to not include this input into the form. That's why your form is always valid. It is actually empty.

https://angular.io/api/forms/NgModel#options