title: Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'
body: <p>I'm trying to implement Dynamic Forms in Angular 2. I've added additional functionalities like Delete and Cancel to the dynamic forms.
  I've followed this documentation: <a href="https://angular.io/docs/ts/latest/cookbook/dynamic-form.html">https://angular.io/docs/ts/latest/cookbook/dynamic-form.html</a></p>
  
  <p><a href="https://i.stack.imgur.com/aXVYJ.png"><img src="https://i.stack.imgur.com/aXVYJ.png" alt="enter image description here"></a>  </p>
  
  <p>I've made some changes to the code. I'm getting error here.</p>
  
  <p>How do i make this error go?</p>
  
  <p>You can find the full code here: <a href="http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview">http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview</a> , which is working in plunker but not in my local system.</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;div&gt;
    &lt;form [formGroup]="form"&gt;
  
      &lt;div *ngFor="let question of questions" class="form-row"&gt;
        &lt;label [attr.for]="question.key"&gt;{{question.label}}&lt;/label&gt;
  
    &lt;div [ngSwitch]="question.controlType"&gt;
  
      &lt;input *ngSwitchCase="'textbox'" [formControlName]="question.key"
              [id]="question.key" [type]="question.type" [(ngModel)]="question.value"&gt;
  
      &lt;select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" &gt;
        &lt;option *ngFor="let opt of question.options" [ngValue]="opt.key" &gt;{{opt.value}}&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;input *ngSwitchCase="'checkbox'"  [(ngModel)]="question.value"
              [id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck [ngModelOptions]="{standalone: true}"&gt;
  
    &lt;/div&gt; 
    &lt;div class="errorMessage" *ngIf="!form.controls[question.key].valid"&gt;{{question.label}} is required&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-row"&gt;
        &lt;button type="submit" [disabled]="!form.valid" (click)="onSubmit()"&gt;Save&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" (click)="cancel()"&gt;Cancel&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" (click)="clear()"&gt;Clear&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;
  </code></pre>
  
  <p>Component code:</p>
  
  <pre><code>import { Component, Input, OnInit }  from '@angular/core';
  import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
  import { QuestionBase }                 from './question-base';
  import { QuestionControlService }       from './question-control.service';
  import { ControlGroup }     from '@angular/common';
  import {ChangeDetectorRef} from '@angular/core';
  import { FormsModule }   from '@angular/forms';
  
  @Component({
    selector: 'dynamic-form',
    templateUrl: 'app/dynamicform/form.component.html',
    directives: [REACTIVE_FORM_DIRECTIVES],
    providers:  [QuestionControlService]
  })
  export class DynamicFormComponent implements OnInit {
  
    @Input() questions: QuestionBase&lt;any&gt;[] = [];
    form: FormGroup;
    payLoad:any;
    payLoad2:any;
    questiont: QuestionBase&lt;any&gt;;
    questiond: QuestionBase&lt;any&gt;;
    constructor(private qcs: QuestionControlService, private cdr: ChangeDetectorRef) {  }
    ngOnInit() {
      this.form = this.qcs.toFormGroup(this.questions);
      console.log("Form Init",this.questions);
      this.questiont = JSON.parse(JSON.stringify(this.questions));
      this.questiond = JSON.parse(JSON.stringify(this.questions));
    }
    onSubmit() {
      this.payLoad = JSON.stringify(this.form.value);
      this.payLoad2=this.payLoad;
      this.questiont = JSON.parse(JSON.stringify(this.questions));
      console.log("Submitted data",this.questions);
    }
    cancel(){
      console.log("Canceled");
      this.questions = JSON.parse(JSON.stringify(this.questiont));
    }
    clear(){
      this.questions = JSON.parse(JSON.stringify(this.questiond));
      this.questiont = JSON.parse(JSON.stringify(this.questiond));
      console.log("Cleared");
      this.cdr.detectChanges();
    }
  }
  </code></pre>