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)

score 20 · Answer 1 · answered Mar 10 '18 at 11:34

20

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.

answered Mar 10 '18 at 11:34

Bharath R S

258
3
12

1

I wish it came earlier, this is actually the answer – Ikelie Cyril Jul 28 '18 at 07:06
@IkelieCyril In the question, we can see OP has the module imported in the app module. This is not the issue in this question. – AT82 Sep 05 '18 at 15:52

AT82 · Accepted Answer · 2018-09-05T15:58:12.760

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

Thanks for that answer. How do i create a local variable on the input field, to get the form validation errors (not using #f)? This is for showing the error message inside a span/div. — Sarath, May 22 '17 at 12:08
I edited question and updated plunker. Also please check the links I provided for more information! :) — AT82, May 22 '17 at 12:46

score 10 · Answer 3 · answered Oct 24 '18 at 13:18

10

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.

answered Oct 24 '18 at 13:18

Abdul Rehman Sayed

6,532
7
45
74

score 7 · Answer 4 · edited Dec 19 '18 at 19:37

7

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

edited Dec 19 '18 at 19:37

roschach

8,390
14
74
124

answered Dec 19 '18 at 16:56

Chema

887
8
14

score 1 · Answer 5 · edited Jun 24 '21 at 18:30

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

score 0 · Answer 6 · answered Oct 06 '21 at 10:52

Could be possibly 2 reasons:

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

import { FormsModule } from '@angular/forms';
If the problem persists after saving everything correctly. Stop the server and re-run ng server

score 0 · Answer 7 · edited Mar 24 '23 at 09:01

In addition to the previous solutions, this error can also come up if you are using routing in angular and your component is not added in the array of components (declared in app-routing.module.ts) which is in turn being used in the declarations of app.module.ts.

So, in my case app-routing.module.ts

import { AddActionComponent } from './pages/add-action/add-action.component';

const routes: Routes = [...,
{
  path: 'addaction',
  component: AddActionComponent
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [
  ...,
  AddActionComponent //this was missing for me
]

My app.module.ts looks like

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

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

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

7 Answers7

Linked