undefined 'touched' in angular2

Question

Я пытаюсь проверить свою форму, но при получении ошибки неопределенный коснулся, думаю, что я сделал что-то не так с импортом, может кто-нибудь, пожалуйста, предложите мне какую-нибудь помощь.

Мой шаблон,

<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> 

Мой компонент,

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'); 
     } 
    }); 
    } 
} 

Я пытаюсь проверить мою форму, но получаю сообщение об ошибке не определено трогали, думаю, что я сделал что-то неправильно с файлов импорта. Может кто-нибудь, пожалуйста, предложите мне помощь.

Answer 1

Вы должны найти контроль в форме. Попробуйте использовать:

form.controls['firstname'].touched 

и:

form.controls['firstname'].valid