Why checkbox is not binding value of object field (Angular 4)

Question

I want to bind field value in current object and switch checkbox depend on it value.

My checkbox:

<label class="checkbox-inline checbox-switch switch-success">
<input
  #livingRoom
  type="checkbox"
  name="livingRoom"
  id="livingRoom"
  [checked]="showDefaultTypeRoom.isExistLivingRoom"
/>
<span></span>
</label>

I change showDefaultTypeRoom object and isExistLivingRoom but my checkbox is not switching depend on isExistLivingRoom value.

How fix it?

Guntram · Accepted Answer · 2018-03-27 10:36:40Z

1

Use:

<input type="checkbox" [(ngModel)]="test.value"/>

And in TS:

public test = {value: true};

try here: https://stackblitz.com/angular/demklkjdbqq

(or use reactive form style)

answered Mar 27, 2018 at 10:36

Guntram

98015 silver badges20 bronze badges

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

1 Comment

Guntram Over a year ago

see here: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html#understanding-ngmodel

Vivek Doshi · Accepted Answer · 2018-03-27 10:39:10Z

0

You should use 2 way binding :

[(ngModel)]="showDefaultTypeRoom.isExistLivingRoom"

instead of :

[checked]="showDefaultTypeRoom.isExistLivingRoom"

edited Mar 27, 2018 at 10:39

answered Mar 27, 2018 at 10:27

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

4 Comments

Guntram Over a year ago

I think if you wanna do it that way you should split the 2-way binding: [checked]="showDefaultTypeRoom.isExistLivingRoom" (checkedChange)="setTheValue($event)"

Vivek Doshi Over a year ago

@Guntram , Sorry for typo , I was meant to say ngModel with 2 way data binding

Guntram Over a year ago

Yeah, I know, typing fast to answer quickly :)

Vivek Doshi Over a year ago

@Guntram , Exactly :)

Collectives™ on Stack Overflow

Why checkbox is not binding value of object field (Angular 4)

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related