title: Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?
body: <p>I have worked with form builder in angular 2/4, But now I am using it in angular 6. I have seen this question (<a href="https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form">Can&#39;t bind to &#39;formGroup&#39; since it isn&#39;t a known property of &#39;form&#39;</a>) but it was for angular 2.
  I doing exact same against angular 4 but I am getting this error. Please help:
  my code are:</p>
  
  <p><strong>app.module.ts: ( I have exported FormsModule &amp; ReactiveFormsModule) :</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { LocalStorage } from './services/localStorage.service';
  import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
  import { Router } from '@angular/router';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { routing } from './app.route';
  
  import { FormsModule, ReactiveFormsModule }         from '@angular/forms';
  import { LoginComponent } from './components/login/component';
  import { ForgotComponent } from './components/forgotPassword/component';
  
  
  @NgModule({
    exports: [
      FormsModule,
      ReactiveFormsModule
    ],
    declarations: [
      AppComponent,LoginComponent,ForgotComponent
    ],
    imports: [
      BrowserModule,
      routing,
  
    ],
    providers: [
      LocalStorage,
    ],
    bootstrap: [AppComponent],
  
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>login.component.ts:</strong></p>
  
  <pre><code>import { Component, ViewContainerRef, OnInit } from '@angular/core';
  import { Router } from '@angular/router';
  import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
  import { LocalStorage } from '../../services/localStorage.service';
  import { environment } from '../../../environments/environment';
  import { HttpService } from '../../services/http.service';
  import { emailRegexp, passwordRegexp } from '../../constants';
  @Component({
      selector: 'login-app',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
  })
  
  /**
   * LoginComponent class
   */
  
  export class LoginComponent {
      private loginForm: any;
      loginValue:any;
  
      constructor(
          private formBuilder: FormBuilder,
          private _router: Router,
          private httpService: HttpService,
          private localStorage: LocalStorage,
      ) {
          this.loginValue = new LocalStorage(environment.localStorageKeys.ADMIN).value;
  
          this.loginForm = this.formBuilder.group({
              email: ['', Validators.compose([Validators.required, Validators.pattern(emailRegexp)])],
              password: ['', Validators.compose([Validators.required, Validators.minLength(8)])]
          });
      }
  }
  </code></pre>
  
  <p><strong>login.component.html: ( Something like this)</strong></p>
  
  <pre><code> &lt;form [formGroup]="loginForm" (ngSubmit)="loginForm.valid &amp;&amp; login()" novalidate&gt;
  
   &lt;input type="email" autocomplete="off" (focus)="focusFunction()" placeholder="User Name" formControlName="email" class="form-control"&gt;
  
  &lt;div class="col-12"&gt;
   &lt;input autocomplete="off" type="password" (focus)="focusFunction()" placeholder="Password" formControlName="password" class="form-control"&gt;
   &lt;/div&gt;
  
   &lt;button [disabled]="!loginForm.valid" type="submit" class="btn btn-inverse btn-rounded btn-block"&gt;
              &lt;div  *ngIf="!loading" class="sign-in"&gt;Sign in&lt;/div&gt;
    &lt;/button&gt;
  
    &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5whRs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5whRs.png" alt="Console Image"></a></p>