title: Validation in angular 2, not importing ControlGroup and Control related to form validation from @angular/common?
body: <p>Hi I am new to angular 2 and angularcli please help me.</p>
  
  <p>I have created form which need to validate. I am trying to import directives or services from @angular/common it showing error.
  I am trying to access ControlGroup and Control from @angular/common.
  for validation I am using FormBuilder </p>
  
  <p>I am not getting what I am doing wrong</p>
  
  <p>Here is my component typescript file </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {FormBuilder, FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
  import {ControlGroup, Control} from '@angular/common'; //at this line the error is [ts] Module '"/home/Documents/newproject/mds/node_modules/@angular/common/index"' has no exported member 'Control'
  
  @Component({
  selector: 'app-formvalidate',
  templateUrl: './formvalidate.component.html',
  styleUrls: ['./formvalidate.component.css']
  })
  export class FormvalidateComponent {
    myForm:ControlGroup;
    constructor(fb: FormBuilder) {
    this.myForm = fb.group({
    firstname: ["", Validators.required],
    lastname: ["", Validators.required],
    usermail: ["", Validators.required],
    userpass: ["", Validators.required],
    userconfpass: ["", Validators.required]
  
  });
  
  }
  }
  </code></pre>
  
  <p>Here is my HTML page which is contain form </p>
  
  <pre><code> &lt;div class="signin"&gt;
          &lt;p class="login_subheading"&gt;Enter your information below&lt;/p&gt;
         &lt;form #sgnform="ngForm" ngSubmit(sgnform.value)&gt;
          &lt;div &gt;
            &lt;label&gt;First Name&lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="text" class="form-control" id="firstname"  ngControl="firstname" #firstname="ngControl"&gt;
          &lt;/div&gt;
          &lt;div *ngIf="!firstname.valid"&gt;This field is required&lt;/div&gt;
          &lt;div &gt;
            &lt;label&gt;Last Name&lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input  type="text" class="form-control" id="lastname"  ngControl="lastname"  #lastname="ngControl"&gt;
          &lt;/div&gt;
          &lt;div &gt;
            &lt;label&gt;Email Address&lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input  type="email" id="usermail" class="form-control" ngControl="usermail" #usermail="ngControl"&gt;
          &lt;/div&gt;
          &lt;div &gt;
            &lt;label&gt;Password&lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="password" id="userpass" class="form-control" ngControl="userpass"  #userpass="ngControl"&gt;
          &lt;/div&gt;
          &lt;div &gt;
             &lt;label&gt;Confirm Password&lt;span class="asterisk"&gt;*&lt;/span&gt;&lt;/label&gt;
            &lt;input type="password" id="userconfpass" class="form-control" ngControl="userconfpass" #userconfpass="ngControl"&gt;
          &lt;/div&gt;
            &lt;div class="margintopbtm_30"&gt;
            &lt;button type="submit" class="btn btn-primary modal_btn"&gt;Submit&lt;/button&gt;
            &lt;span class="required pull-right"&gt;*Required fields&lt;/span&gt;
            &lt;/div&gt;
  
           &lt;/form&gt;
          &lt;div class="footer_login"&gt;
          &lt;span class="not_registered"&gt;Already registered?&lt;/span&gt;
          &lt;a class="btn sign-botton modal_btn pull-right"&gt;Sign in&lt;/a&gt;      &lt;br&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have applied validation to view but i am getting error 
  the error what i am getting is given bellow</p>
  
  <pre><code>zone.js:388Unhandled Promise rejection: Template parse errors:
  There is no directive with "exportAs" set to "ngControl" ("/label&gt;
            &lt;input type="text" class="form-control" id="firstname"    ngControl="firstname" [ERROR -&gt;]#firstname="ngControl"&gt;
          &lt;/div&gt;
               &lt;div *ngIf="!firstname.valid"&gt;This field is re"):                     FormvalidateComponent@5:92
   There is no directive with "exportAs" set to "ngControl" ("/label&gt;
            &lt;input  type="text" class="form-control" id="lastname"      ngControl="lastname"  [ERROR -&gt;]#lastname="ngControl"&gt;
          &lt;/div&gt;
          &lt;div &gt;
  "):FormvalidateComponent@10:92
  </code></pre>
  
  <p>My app.module.ts file is </p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  
  import { AppComponent } from './app.component';
  import { TestComponent } from './test/test.component';
  import { FormvalidateComponent } from './formvalidate/formvalidate.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      TestComponent,
      FormvalidateComponent
   ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
     })
    export class AppModule { }
  </code></pre>
  
  <p>please let me where i am wrong. I am not getting what to do with this error. </p>