How to get checkbox value in angular 5 app

Question

I am working on Angular checkbox and need to read value either given ng-true-value / ng-false-value or boolean value not sure what I am missing from code. I am reading event but not sure which value to read??

template

<div>

 <input 
    type="checkbox" 
    name="questionAnswerState" 
    ng-model="check"
    ng-true-value = "answerProvided"
    ng-false-value="questionAnswerNotProvided" 
    (change)="isAnswerProvided($event, check)"
    /> Answer Provided?

component

 isAnswerProvided(event: any, check:any)
  {
    console.log("question answer not provided responseId:: ",this.responseId, " questionId::",this.questionId, "  check::", check );
    console.log(event);
  }

The snippet looks like AngularJs(v1.x)... not Angular (v2.0+) — Ritwick Dey
– Ritwick Dey, Commented May 24, 2018 at 9:29

Malcor · Accepted Answer · 2018-05-24 09:36:25Z

2

If you're using Angular 2> you should use the checked attribute for using one way binding, that the UI will only read the value of check. Using this method you would have to update the check value in your component.

 <input 
    type="checkbox" 
    name="questionAnswerState" 
    [checked]="check"
    (change)="isAnswerProvided($event, check)"
    /> Answer Provided?

or if you're after two way binding, where the state is controlled completely by the UI you can use ngModel like this:

 <input 
    type="checkbox" 
    name="questionAnswerState" 
    [(ngModel)]="check"
    (change)="isAnswerProvided($event, check)"
    /> Answer Provided?

edited May 24, 2018 at 9:36

answered May 24, 2018 at 9:30

Malcor

2,73124 silver badges29 bronze badges

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

4 Comments

K.Z Over a year ago

[checked]="check" return undefinded when I console.log in component

Malcor Over a year ago

is check defined in your component. If not, just stick with the two way binding method of using ngModel or add check: boolean to your component

K.Z Over a year ago

[(ngModel)]="check" worked, but still how to read value from $event for checkbox??

Malcor Over a year ago

You don't need to read the value from the checkbox, your model is check, you only need to look at the value for check now.

Collectives™ on Stack Overflow

How to get checkbox value in angular 5 app

template

component

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

template

component

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related