Accessing 'checked' state for checkbox using Angular field binding

Question

Using Angular 5.1.1, I am attempting to call a function when a checkbox changes. This method works fine for text types but for checkbox input types it always sends the value of "on" to the function even when the box is unchecked. Can anyone explain what I am doing wrong?

<input type="checkbox" name="enabled" [checked]="score?.enabled" #enabled (change)="OnFieldChanged(enabled.value)" />

Here is the component

import { Component} from '@angular/core';

@Component({
    selector: 'score',
    templateUrl: './score.component.html',
    styleUrls: ['./score.component.less']
})
export class ScoreComponent {
    public score: IScore;

    constructor() {
    }

    OnFieldChanged(value: string): void {
        var fieldValue = value;
    }
}

JoeGeeky · Accepted Answer · 2017-12-16 13:36:16Z

1

After lots of trial and error, I found the solution. You have to apply the field to [(ngModel)]. Simply passing OnFieldChanged(judge) also did not work since the boolean property was never actually updated

<input type="checkbox" name="enabled" [checked]="score?.enabled" (change)="OnFieldChanged(judge.enabled)" [(ngModel)]="score.enabled" />

answered Dec 16, 2017 at 13:36

JoeGeeky

3,7967 gold badges39 silver badges56 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-12-15 02:07:20Z

0

Just access score via the function as follows,

<input type="checkbox" name="enabled" [checked]="score?.enabled" #enabled (change)="OnFieldChanged(score)" />

and inside TS

OnFieldChanged(value: string): void {
        var fieldValue = value.enabled;
}

answered Dec 15, 2017 at 2:07

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

JoeGeeky Over a year ago

This is not exactly what I am looking for. I am trying to create a reusable function allowing me to capture individual input field value changes and not the whole object

Sajeetharan Over a year ago

i dont think you can achieve that

Collectives™ on Stack Overflow

Accessing 'checked' state for checkbox using Angular field binding

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related