title: Checkbox value is not changing in reactive forms angular
body: <p>i m generating form from json file with help of reactive forms.Generation of form works properly but the problem i m facing is - when i click on checkbox for first time in mozila its value becomes "on". but when i uncheck it nothing is happening its value remains "On" which should be "off or false". In chrome on click nothing is happening. </p>
  
  <p>app.components.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { QuestionControlService } from './question-control.service';
  import GxData from './gx.json';
  @Component({
    selector: 'app-root',
    template: `
      &lt;div&gt;
        &lt;app-dynamic-form [questions]="questions"&gt;&lt;/app-dynamic-form&gt;
      &lt;/div&gt;
    `,
    providers: []
  })
  export class AppComponent{
  
    questions: any[];
    constructor() {
      this.questions = GxData;
    }
  
  } 
  </code></pre>
  
  <p>dynamic-form.components.ts</p>
  
  <pre><code>import { Component, Input, OnInit, SimpleChanges } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  import { QuestionControlService } from '../question-control.service';
  import SbbData from '../sbb.json';
  import GxData from '../gx.json';
  
  @Component({
    selector: 'app-dynamic-form',
    templateUrl: './dynamic-form.component.html',
    providers: [QuestionControlService]
  })
  export class DynamicFormComponent implements OnInit {
  
    @Input() questions: any[] = [];
    form: FormGroup;
    payLoad = '';
  
    constructor(private qcs: QuestionControlService) { }
  
    ngOnInit() {
      this.form = this.qcs.toFormGroup(this.questions);
    }
    callGx() {
      this.questions = GxData;
      this.form = this.qcs.toFormGroup(this.questions);
    }
    callSbb() {
      this.questions = SbbData;
      this.form = this.qcs.toFormGroup(this.questions);
    }
  
    onSubmit() {
  
      this.payLoad = JSON.stringify(this.form.value);
      console.log(JSON.parse(this.payLoad));
    }
  
  }
  </code></pre>
  
  <p>dynamic-form.component.html</p>
  
  <pre><code>&lt;div class="search_box"&gt;
    &lt;form (ngSubmit)="onSubmit()" [formGroup]="form"&gt;
        &lt;button type="button" (click)="callSbb()"&gt;SBB&lt;/button&gt; 
        &lt;button type="button" (click)="callGx()"&gt;GX&lt;/button&gt; 
      &lt;div *ngFor="let question of questions" class="form-row"&gt;
        &lt;app-question [question]="question" [form]="form"&gt;&lt;/app-question&gt;
      &lt;/div&gt;
  
      &lt;div class="form-row"&gt;
        &lt;button type="submit" [disabled]="!form.valid"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  
    &lt;div *ngIf="payLoad" class="form-row"&gt;
      &lt;strong&gt;Saved the following values&lt;/strong&gt;&lt;br&gt;{{payLoad}}
    &lt;/div&gt;
  &lt;/div&gt;
  {{form.value |json}} 
  </code></pre>
  
  <p>question-control.service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { FormControl, FormGroup, Validators } from '@angular/forms';
  
  @Injectable()
  export class QuestionControlService {
    constructor() { }
  
    toFormGroup(questions: any[]) {
      let group: any = {};
  
      questions.forEach(question =&gt; {
        group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
          : new FormControl(question.value || '');
      });
      return new FormGroup(group);
    }
  }
  </code></pre>
  
  <p>dynamic-form-question.component.ts</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  // import { QuestionBase } from '../question-base';
  
  @Component({
    selector: 'app-question',
    templateUrl: './dynamic-form-question.component.html'
  })
  export class DynamicFormQuestionComponent {
    @Input() question: any;
    @Input() form: FormGroup;
    get isValid() { return this.form.controls[this.question.key].valid; }
  }
  </code></pre>
  
  <p>dynamic-form-question.component.html</p>
  
  <pre><code>&lt;div [formGroup]="form"&gt;
  
  
    &lt;div [ngSwitch]="question.controlType" class="checkbox_wrapper"&gt;
  
      &lt;input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" name="{{question.name}}"&gt;
      &lt;label [attr.for]="question.key"&gt;{{question.label}}&lt;/label&gt;
  
      &lt;select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key" name = "{{question.name}}" &gt;
        &lt;option *ngFor="let opt of question.options" [attr.value]="opt.key" [selected]="opt.select"&gt;{{opt.value}}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class="errorMessage" *ngIf="!isValid"&gt;{{question.label}} is required&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>both json-files look like</p>
  
  <pre><code>[
      {
          "key": "Context",
          "label": "Context",
          "required": false,
          "order": 1,
          "controlType": "textbox",
          "name": "Context",
          "type": "checkbox"
      },
      {
          "key": "contextopt",
          "label": "",
          "required": false,
          "order": 2,
          "controlType": "dropdown",
          "name": "contextopt",
          "options": [
              {
                  "key": "All Context",
                  "value": "All Context",
                  "select": true
              },
              {
                  "key": "aaa",
                  "value": "aaa"
              },
              {
                  "key": "bb",
                  "value": "bb"
              },
              {
                  "key": "Other",
                  "value": "Other"
              }
          ]
      },
      {
          "key": "Movement",
          "label": "Movement",
          "required": false,
          "order": 3,
          "controlType": "textbox",
          "name": "Movement",
          "type": "checkbox"
      }
  ]
  </code></pre>