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

Question

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

Answer 1

In my case, with Angular 11, I was binding input field to template variable (i.e. [(ngModel)]="UserNameSearch") instead of component property since I had same property name as template variable. I changed my component property to camel case and used it to bind and it worked.

Before: [(ngModel)]="UserNameSearch" (binding to template variable)

After: [(ngModel)]="userNameSearch" (binding to component property)

Answer 2

The error:

There is no directive with "exportAs" set to "ngModel"

tell us that we either:

• forgot to import dedicated module
• forgot to add directive to declarations array
• didn't apply directive on element

Looking at your code:

<input type="email" name="emailId" placeholder="Email" #email="ngModel" 
      [ngModelOptions]="{updateOn: 'change'}" />

I noticed that there is no any attribute ngModel or property binding [ngModel] on this element.

So start with adding ngModel attribute.

<input type="email" name="emailId" placeholder="Email" #email="ngModel" 
      ngModel [ngModelOptions]="{updateOn: 'change'}" />
     ^^^^^^^^^