title: Cannot find control error,Unable to upload image from angular 2
body: <p>I am trying to  upload image but i am getting the error </p>
  
  <p>Here is my template</p>
  
  <pre><code>&lt;h3 class = "head"&gt;{{title}}&lt;/h3&gt;
  
  &lt;form  [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)"&gt;
  
  &lt;div class="row"&gt;
  
    &lt;div class="form-group"&gt;     
       &lt;label class="formHeading"&gt;firstname&lt;/label&gt;
        &lt;input type="text" id="facebook" class="form-control"  ngControl="firstname" #firstname="ngForm" &gt;  
   &lt;/div&gt;
     &lt;div *ngIf ="firstname.touched"&gt;
       &lt;div *ngIf ="!firstname.valid" class = "alert alert-danger"&gt;
           &lt;strong&gt;First name is required&lt;/strong&gt;
        &lt;/div&gt;  
    &lt;/div&gt;
  
  
  &lt;div class="form-group"&gt;
      &lt;label class="formHeading"&gt;lastname&lt;/label&gt;
      &lt;input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm" &gt;  
  &lt;/div&gt;
  
     &lt;div *ngIf ="lastname.touched" &gt;
        &lt;div *ngIf = "!lastname.valid" class = "alert alert-danger"&gt;
            &lt;strong&gt;Google name is required&lt;/strong&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  
       &lt;div class="form-group"&gt;
      &lt;label class="formHeading"&gt;image&lt;/label&gt;
      &lt;input type="file" id="facebook" class="form-control col-xs-3"  ngControl="image" #image="ngForm" &gt;  
  &lt;/div&gt;
  
   &lt;div class="form-row btn"&gt;
  
     &lt;button type="submit" class="btn btn-primary pull-right butspace "    [disabled]="!form.valid"&gt;Save&lt;/button&gt;
   &lt;/div&gt;
  
     &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>my Component</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {Http, Response, Headers} from '@angular/http';
  import {Observable} from 'rxjs/Observable';
  import {Subject } from 'rxjs/Subject';
  import {FORM_DIRECTIVES} from '@angular/common';
  import {Control,FormBuilder,ControlGroup,Validators} from '@angular/common';
  @Component({
  templateUrl: './components/profile/profile.html',
    directives: [FORM_DIRECTIVES],})
     export class Profile {
       http: Http;
  
       form: ControlGroup;
      postResponse = new Person();
  
       constructor(fbld: FormBuilder,http: Http) {
        this.http = http;
       this.form = fbld .group({
    firstname: ['', Validators.required],
    lastname: ['', Validators.required]
    });
  }
    onSubmit(form){
      //this.form = form;
     console.log(form);
      var headers = new Headers();
    //  headers.append('Content-Type', 'application/json');
      headers.append('Content-Type','application/x-www-form-urlencoded')       this.http.post('http://localhost/angular/index.php/profile/addprofile', JSON.stringify(form),{headers:headers})
           .map((res: Response) =&gt; res.json())
           .subscribe((res:Person) =&gt; this.postResponse = res);
      }
    }
    class Person{
     firstName:string;
     lastName:string;
  
    }
  </code></pre>
  
  <p>It shows the error   "Cannot find control 'image' in html file" and i am not able to find the exact issue can someone suggest the error in my code.</p>