title: Angular - There is no directive with "exportAs" set to "ngModel"
body: <p>Following are the files in the AngularJS project. As suggested in some posts, I have added:</p>
  
  <pre><code>ngModel name="currentPassword" #currentPassword="ngModel 
  </code></pre>
  
  <p>in the input field, but still getting an error.</p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>.........
  "dependencies": {
          "@angular/common": "^2.3.1",
          "@angular/compiler": "^2.3.1",
          "@angular/core": "^2.3.1",
          "@angular/forms": "^2.3.1",
          "@angular/http": "^2.3.1",
          "@angular/platform-browser": "^2.3.1",
          "@angular/platform-browser-dynamic": "^2.3.1",
          "@angular/router": "^3.3.1",
          "core-js": "^2.4.1",
          "rxjs": "^5.0.1",
          "ts-helpers": "^1.1.1",
          "zone.js": "^0.7.2"
      },
     ...............
  </code></pre>
  
  <p><strong>change-password.component.html</strong></p>
  
  <pre><code>&lt;form #f="ngForm" [formGroup]="changePasswordForm"&gt;
          &lt;div class="form-group"&gt;
              &lt;label for="currentPassword"&gt;Current Password&lt;/label&gt; &lt;input
                  placeholder="currentPassword" ngModel name="currentPassword"
                  #currentPassword="ngModel" id="currentPassword"
                  name="currentPassword" type="text" class="form-control" required
                  minlength="6" formControlName="currentPassword"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-primary" type="submit"&gt;Change Password&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>change-password.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormBuilder, Validators, ControlContainer, FormGroup, FormControl } from '@angular/forms';
  
  @Component({
    selector: 'app-change-password',
    templateUrl: './change-password.component.html',
    styleUrls: ['./change-password.component.css']
  })
  export class ChangePasswordComponent implements OnInit {
  
    changePasswordForm;
  
    constructor(formBuilder: FormBuilder) {
      this.changePasswordForm = formBuilder.group({
        currentPassword: new FormControl('', Validators.compose([Validators.required]))
      });
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>app.module.ts has imports</strong></p>
  
  <pre><code>............
  imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      ReactiveFormsModule
    ]
  ...........
  </code></pre>
  
  <p>I am getting the following error:</p>
  
  <blockquote>
    <p>Unhandled Promise rejection: Template parse errors:
        There is no directive with "exportAs" set to "ngModel" ("urrent Password ]#currentPassword="ngModel" id="currentPassword"
                        name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4 ; Zone:  ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors:
        There is no directive with "exportAs" set to "ngModel" ("urrent Passwo……} Error: Template parse errors:
        There is no directive with "exportAs" set to "ngModel" ("urrent Password ]#currentPassword="ngModel" id="currentPassword"
                        name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4
            at SyntaxError.ZoneAwareError (<a href="http://localhost:4200/polyfills.bundle.js:6884:33" rel="noreferrer">http://localhost:4200/polyfills.bundle.js:6884:33</a>)
            at SyntaxError.BaseError [as constructor] (<a href="http://localhost:4200/vendor.bundle.js:64475:16" rel="noreferrer">http://localhost:4200/vendor.bundle.js:64475:16</a>)
            at new SyntaxError (<a href="http://localhost:4200/vendor.bundle.js:5727:16" rel="noreferrer">http://localhost:4200/vendor.bundle.js:5727:16</a>)</p>
  </blockquote>