Cannot find control error,Unable to upload image from angular 2 - html

Question

I am trying to upload image but i am getting the error
Here is my template
<h3 class = "head">{{title}}</h3>
<form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
<div class="row">
<div class="form-group">
<label class="formHeading">firstname</label>
<input type="text" id="facebook" class="form-control" ngControl="firstname" #firstname="ngForm" >
</div>
<div *ngIf ="firstname.touched">
<div *ngIf ="!firstname.valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">lastname</label>
<input type="text" id="facebook" class="form-control col-xs-3" ngControl="lastname" #lastname="ngForm" >
</div>
<div *ngIf ="lastname.touched" >
<div *ngIf = "!lastname.valid" class = "alert alert-danger">
<strong>Google name is required</strong>
</div>
</div>
<div class="form-group">
<label class="formHeading">image</label>
<input type="file" id="facebook" class="form-control col-xs-3" ngControl="image" #image="ngForm" >
</div>
<div class="form-row btn">
<button type="submit" class="btn btn-primary pull-right butspace " [disabled]="!form.valid">Save</button>
</div>
</div>
my Component
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) => res.json())
.subscribe((res:Person) => this.postResponse = res);
}
}
class Person{
firstName:string;
lastName:string;
}
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.

Answer 1

I believe the issue is that you have ngControl="image" on one of your inputs, but you never officially made image part of the form in FormBuilder. ngControl is looking for image on the form (to initialize the value), but it can't find it.
Try adding image to this:
this.form = fbld .group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
image: ['', Validators.required]
});
And maybe here too:
class Person{
firstName:string;
lastName:string;
image: any;
}
Not sure what the data type is for your image, but this is a start.