here is no directive with "exportAs" set to "ngForm"

Question

I am submitting form in angularjs 2.0 using below code but getting error that no directive with export set to ngForm and ngModel but i am using. Below is my form:

<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
  <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
    <label for="firstName">First Name</label>
    <input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel"
           required/>
    <div *ngIf="f.submitted && !firstName.valid" class="help-block">First Name is required</div>
  </div>
  <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
    <label for="lastName">Last Name</label>
    <input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" required/>
    <div *ngIf="f.submitted && !lastName.valid" class="help-block">Last Name is required</div>
  </div>
  <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
    <label for="username">Username</label>
    <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required/>
    <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
  </div>
  <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel"
           required/>
    <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
  </div>
  <div class="form-group">
    <button [disabled]="loading" class="btn btn-primary">Register</button>
  </div>
</form>

I also imports FormsModule in app.module.ts with below code:

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

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Possible duplicate of [Angular2 Error: There is no directive with "exportAs" set to "ngForm"](http://stackoverflow.com/questions/38648407/angular2-error-there-is-no-directive-with-exportas-set-to-ngform) — The Hungry Dictator, Apr 14 '17 at 12:28

score 6 · Answer 1 · answered Apr 18 '17 at 09:44

I got solution, actually i was using import formModule in main module.ts file.

That we must use inside particular module in my case it is in folder student, because student i keep my my module name inside this there is student.module.ts file, HERE we need to import formModule.

score -1 · Answer 2 · answered Jan 30 '18 at 10:45

Two Things you have to care..

If you use custom module, you have to import the FormModule in that module.
```
        **imports:[CommonModule,HttpModule,FormsModule]**
```
you have to exports the FormModule as well in that module
```
    **exports:[FormsModule],**
```
so together it looks like imports:[CommonModule,HttpModule,FormsModule], exports:[FormsModule],
in Top u have to import the FormsModule

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

if you are using only the app.module.ts then

here is no directive with "exportAs" set to "ngForm"

2 Answers2

no need to export..