Template Parsing Error "There is no directive with exportAs set to ngModel" in Angular 4

I have created one sample project where i have taken to component one with the name of registration and one with the name of login while validation the registration page giving me the below mentioned error

While form validation, the error occurs

>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
        </div>
        <div>
          <input type="email" name="emailId" placeholder="Email" [ERROR ->]#email="ngModel" [ngModelOptions]="{updateOn: 'change'}" />
        </div>

This is my registration component where i have created one form and trying to validate that form

registration.component.html

    <form #varSubmit="ngForm" (ngSubmit)="onSubmit(varSubmit)" novalidate>
        <div>
          <div>
            <input type="text" name="fName" placeholder="First Name" required />
          </div>
        </div>
        <div>
          <div>
            <input type="text" name="lName" placeholder="Last Name" required/>
          </div>
        </div>
        <div>
          Date of Birth:
          <input type="date" name="dob" />
        </div>
        <div>Gender:
          <input type="radio" value="rbtnMale" name="gender" checked/>
          <label for="rbtnMale">Male</label>
          <input type="radio" value="rbtnFemale" name="gender" />
          <label for="rbtnFemale">Female</label>
        </div>
        <div>
          <input type="email" name="emailId" placeholder="Email" #email="ngModel" [ngModelOptions]="{updateOn: 'change'}" />
        </div>
        <div [hidden]="email.pristine || email.valid">Email Shouldnt Empty...!</div>
        <div>
          <div>
            <input type="password" name="pwd" placeholder="Password" />
          </div>
        </div>
        <div>
          <div>
            <input type="password" name="cPwd" placeholder="Confirm Password" />
          </div>
        </div>
        <div>
          <input type="submit" name="btnSubmit" />
          <input type="reset" name="btnReset" />
        </div>
      </form>

This is my app.module.ts file where i import the FormsModule

app.module.ts page

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { FormsModule } from '@angular/Forms';
import { UserRegistrationComponent } from './user-registration/user-registration.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent,
    UserRegistrationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'login-component',
        component: LoginComponentComponent
      },
      {
        path: 'user-registration',
        component: UserRegistrationComponent
      },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }