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

Following are the files in the AngularJS project. As suggested in some posts, I have added:

ngModel name="currentPassword" #currentPassword="ngModel

in the input field, but still getting an error.

package.json

.........
"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"
    },
   ...............

change-password.component.html

<form #f="ngForm" [formGroup]="changePasswordForm">
        <div class="form-group">
            <label for="currentPassword">Current Password</label> <input
                placeholder="currentPassword" ngModel name="currentPassword"
                #currentPassword="ngModel" id="currentPassword"
                name="currentPassword" type="text" class="form-control" required
                minlength="6" formControlName="currentPassword">
            </div>
        </div>
        <button class="btn btn-primary" type="submit">Change Password</button>
    </form>

change-password.component.ts

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

}

app.module.ts has imports

............
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule
  ]
...........

I am getting the following error:

Unhandled Promise rejection: Template parse errors:
    There is no directive with "exportAs" set to "ngModel" ("urrent Password</label> <input
                    placeholder="currentPassword" ngModel name="currentPassword"
                    [ERROR ->]#currentPassword="ngModel" id="currentPassword"
                    name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4 ; Zone: <root> ; 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</label> <input
                    placeholder="currentPassword" ngModel name="currentPassword"
                    [ERROR ->]#currentPassword="ngModel" id="currentPassword"
                    name="currentPassword" type="text" class="form-co"): ChangePasswordComponent@5:4
        at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6884:33)
        at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:64475:16)
        at new SyntaxError (http://localhost:4200/vendor.bundle.js:5727:16)

Solution

You are using an odd mix of template driven and model driven form. Choose either and do not mix those two. So here is sample on the model-driven form:

No need to set required or minlength in template, we handle thid in the component. Also we do not need any ngModel, name etc, since we use formControlName. Also remove #f="ngForm" as that is related to template-driven form. So your template should look like this:

<form [formGroup]="changePasswordForm">
  <label for="currentPassword">Current Password</label> 
  <input formControlName="currentPassword">
  <button type="submit">Change Password</button>
</form>

And when building the form, we set all validators we need, in this case required and minLength:

constructor(formBuilder: FormBuilder) {
  this.changePasswordForm = formBuilder.group({
    currentPassword: new FormControl('', 
          Validators.compose([Validators.required, Validators.minLength(6)]))
  });
}

So that's it! :)

I suggest you read about forms, here is the guide for template driven forms and guide for reactive forms

EDIT:

For form validation, check the official docs for form validation. If you have plenty fields, you might want to adapt their solution, where storing all form errors in a separate object.

But here is a basic solution to check for form errors for each form control. So the following would be for your validations:

<small *ngIf="changePasswordForm.get('currentPassword').hasError('required')">Required!</small>
<small *ngIf="changePasswordForm.get('currentPassword').hasError('minlength')">Minimum 6 chars</small>

You might also want to show perhaps error messages when field is touched (??). This all you can find in the link I provided for validation :)

Updated Demo