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

Question

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 ]#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 (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)

Answer 1

Add import { FormsModule } from '@angular/forms'; to your app.module.ts and in the import array you need to add FormsModule.

The answer is pretty late, but if someone is stuck with the issue in angular 5, you need to do this.

Answer 2

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

Answer 3

This might help someone in Angular 6.

I forgot adding ngModel directive to my input control but had added #currentPassword="ngModel" to my form. The imports etc were all in place.