Angular / NgForm / NgModel指令错误：没有将“ exportAs”设置为“ 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!

Answer 1

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.