Angular/ NgForm/NgModel directives error : There is no directive with "exportAs" set to "ngForm"

Question

I have a asp.net core/Angular project. In my app.module.client.ts file, i'm importing the '@angular/forms' as below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { sharedConfig } from './app.module.shared';

@NgModule({
    bootstrap: sharedConfig.bootstrap,
    declarations: sharedConfig.declarations,
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ...sharedConfig.imports
    ],
    providers: [
        { provide: 'ORIGIN_URL', useValue: location.origin }
    ]
})
export class AppModule {
}

My component is configured like this:

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Operator } from '../shared/operator.model';

@Component({
    selector: 'operator-form',
    template: require('./operator-form.component.html')
})

export class OperatorFormComponent {

    model = new Operator("Login", "Name", "Last name", "password");
    submitted = false;
    onSubmit() { this.submitted = true; }
    // TODO: Remove this when we're done
    get diagnostic() { return JSON.stringify(this.model); }
}

My template is configured as below:

    <form  #formOperator="ngForm">
        <div class="form-group">
            <label for="login">Login</label>
            <input type="text" class="form-control" id="login" required [(ngModel)]="model.login" name="login" />
        </div>
        <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" class="form-control" id="firstName" required [(ngModel)]="model.firstName" name="firstName" />
        </div>
        <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" class="form-control" id="lastName" required [(ngModel)]="model.lastName" name="lastName" />
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="text" class="form-control" id="password" required [(ngModel)]="model.password" name="password" />
        </div>
        <div class="form-group">
            <label for="expirationDate">Valid until</label>
            <input type="date" class="form-control" id="expirationDate" [(ngModel)]="model.validUntil" name="expirationDate" />
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
    </form>

Unfortunately i've got the error: There is no directive with "exportAs" set to "ngForm"

Any idea?

Thanks!

the forms module wasn't applied correctly, if you remove #formOperator="ngForm", does binding work? it shouldn't — Max Koretskyi
@Maximus I agree, it's like, the forms module doesn't load. No, the binding doesn't work if i remove the directive NgForm. — Issa Dawaji

Issa Dawaji Issa Dawaji · Accepted Answer · 2017-06-08T10:33:22

When you create an angular project with the command "dotnet new Angular", the app.module is divided in three files: app.module.client.ts, app.module.server.ts and the app.module.shared.ts.

In order to import properly the package '@angular/forms' you have to add it in the app.module.shared.ts or to add it in the client and the server files.

Angular/ NgForm/NgModel directives error : There is no directive with "exportAs" set to "ngForm"

1 Answers