undefined 'touched' in angular2 - angularjs

Question

I am trying to validate my form but getting the error undefined touched, think i did something wrong with the import filed,can some one please suggest me some help.
My Template,
<h3 class = "head">MY PROFILE</h3>
<form [formGroup]="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" [formControl]="form.controls['firstname']" >
</div>
<div *ngIf ="firstname.touched">
<div *ngIf ="!firstname.valid" class = "alert alert-danger">
<strong>First name is required</strong>
</div>
</div>
</div>
</form>
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 {CORE_DIRECTIVES} from '#angular/common';
import { Router, ROUTER_DIRECTIVES } from '#angular/router';
import {Control,ControlGroup} from '#angular/common';
import {FORM_DIRECTIVES,FormBuilder,FormGroup,Validators, REACTIVE_FORM_DIRECTIVES} from '#angular/forms';
Component({
templateUrl: './components/profile/profile.html',
directives: [CORE_DIRECTIVES,ROUTER_DIRECTIVES,FORM_DIRECTIVES,REACTIVE_FORM_DIRECTIVES],
})
export class Profile {
http: Http;
form: FormGroup;
constructor(fbld: FormBuilder,http: Http,public router: Router) {
this.http = http;
this.form = fbld .group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
profilename :['', Validators.required],
image : [''],
phone : ['']
});
}
onSubmit(form) {
console.log(form);
var headers = new Headers();
headers.append('Content-Type','application/x-www-form-urlencoded');
this.http.post('http://localhost/angular/index.php/profile/addprofile', JSON.stringify(form),{headers:headers});
subscribe(response => {
if(response.json().error_code === 0) {
alert('added successfully');
this.router.navigate(['/demo/professional']);
} else {
alert('fail');
}
});
}
}
I am trying to validate my form but getting the error undefined touched, think I did something wrong with the import files. Can someone please suggest me some help.

Answer 1

You have to find the control in the form. Try to use:
form.controls['firstname'].touched
and:
form.controls['firstname'].valid