Angular 2: Can't bind to 'ngModel' since it isn't a known property of 'input'
<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>