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

user_2414160 0
Viewed 46783

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)

angular2-ngmodel angular2-forms angular
6 Answers

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.

user_40541860

if you work with angular template-driven forms and want to use #xname="ngModel" you also need to use [(ngModel)]="mymodel" directive in the same input, and, of course, import de FormsModule to your app.module, as said in other answers above

user_64461810 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactFormComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

importing FormsModule resolved the issue

user_144908640

Could be possibly 2 reasons:

  1. Check you are not missing FormModule (below) in your app.module.ts and its imported under, imports: []

    import { FormsModule } from '@angular/forms';

  2. If the problem persists after saving everything correctly. Stop the server and re-run ng server

user_17379890
Related