Получение значения формы Angular2 на изменениях CheckBox

Question

дало этому компоненту

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); 
    } 
} 

и его шаблон:

<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> 

То, что я пытаюсь сделать, чтобы получить значение формы, когда флажок изменяет свое значение , но сейчас он работает не так, как предполагалось. В первый раз у флажок я получил

{обратная связь: 0,5, смешайте: 0,5, состояние: не определено, время: 0,3}

, а затем

{статус: правда, обратная связь: 0,5, время: 0,3 смешайте: 0,5}, если флажок не установлен

и

{статус: ложный, обратная связь: 0,5, время: 0,3 смешайте: 0,5}, когда он проверил

Почему форма действует так?

Answer 1

Это потому, что вы используете одностороннее связывание. изменить это:

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

Answer 2

Если вы хотите использовать NgModel директиву для связывания данных, вам нужно использовать ngModelChange для передачи данных:

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

Тогда в компоненте:

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