Getting Angular2 form values on checkbox change

Question

given this component

import { Component, Input, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'effect',
    templateUrl: 'templates/effect.html'
})
export class EffectComponent implements OnInit {
    @Input() effect: any;
    constructor() { }
    ngOnInit() {
    }
    switchEffect(form) {
        console.log(form.value);
    }
}

and its template:

<li class="collection-item">
    <form #f="ngForm">
        <div class="switch">
            <label>
                <input type="checkbox" name="status" [ngModel]="status" (change)="switchEffect(f)" />
                <span class="lever"></span>                    
            </label>    
        </div>
        <a (click)="switchSettings=!switchSettings">
        {{effect.publicName}}
            <i class="material-icons" [ngClass]="{'expand-less' : switchSettings}">expand_more</i>
        </a>
        <ul class="effect-settings collection" *ngIf="switchSettings">
            <li class="collection-item" *ngFor="let setting of effect.settings">
                <label>{{setting.type}}</label>
                <input type="range" name="{{setting.type}}" [ngModel]="setting.default" [value]="setting.default" [min]="setting.min" [max]="setting.max" step="0.1" />
            </li>
        </ul>
    </form>
</li>

What I'm trying to do is to get the form values when the checkbox changes its value. but right now it's not working as intended. The first time y click the checkbox I got

{feedback:0.5,mix:0.5,status:undefined,time:0.3}

and then

{status: true, feedback: 0.5, time: 0.3, mix: 0.5} when the checkbox is not checked

and

{status: false, feedback: 0.5, time: 0.3, mix: 0.5} when it's checked

Why is the form behavin like this?

Stefan Svrkota · Accepted Answer · 2017-01-14 22:31:41Z

2

If you want to use NgModel directive for data binding, you need to use ngModelChange to pass data:

<input type="checkbox" name="status" [ngModel]="status" (ngModelChange)="switchEffect($event)" />

Then in your component:

switchEffect(event: any) {
    console.log(event); // this will print current value of checkbox in console
}

answered Jan 14, 2017 at 22:31

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

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

2 Comments

Diego Vega Over a year ago

Now I get the current value of checkbox by adding de ngModelChange directive like you said, but if I modify de function call to switchEffect(f,$event) where "f" is the local reference to the form, and then in the component switchEffect(f,e) { console.log(f.form.value.status); console.log(f.form); console.log(e); } I got in console undefined, FormGroup obj, true. If I lexamine the FormGroup object, find a property 'value' that has the status value to true.....it`s weird

Stefan Svrkota Over a year ago

@DiegoVega Yeah, I know what you are talking about, you can fix this with a "hack": setTimeout(() => { console.log(f.form.value.status); });

undefined · Accepted Answer · 2017-01-14 19:57:14Z

0

It's because you are using one way binding. change to this:

  <input type="checkbox" name="status" [(ngModel)]="status" (change)="switchEffect(f)" />

answered Jan 14, 2017 at 19:57

undefined

6,97413 gold badges53 silver badges106 bronze badges

1 Comment

Diego Vega Over a year ago

I've already tried with 2 way binding, but is not working, still getting undefined the first. It's like if the form doesnt get the updated value of the checkbox but the old one

Collectives™ on Stack Overflow

Getting Angular2 form values on checkbox change

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related