TypeScript-'s Angular Framework Error - “There is no directive with exportAs set to ngForm”

Question

I keep getting this error while using TypeScript\'s Angular2-forms framework:

There is no directive with \"exportAs\" set to \"ngForm

Answer 1

Two Things you have to care..

1. If you using the sub module, you have to import the FormModule in that sub module.

           **imports:[CommonModule,HttpModule,FormsModule]**
   

2. you have to exports the FormModule in the module

       **exports:[FormsModule],**
   

   so together it looks like imports:[CommonModule,HttpModule,FormsModule], exports:[FormsModule],

3. in Top u have to import the FormsModule

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

---

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

no need to export.. only import required

Answer 2

I just moved routing modules i.e. say ARoutingModule above FormsModule and ReactiveFormsModule and after CommonModule in imports array of modules.

Answer 3

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

@NgModule({
  imports: [FormsModule],
  ...
})

Answer 4

(Just in case someone else is blind like me) form FTW! Make sure to use <form> tag

wont work:

<div (ngSubmit)="search()" #f="ngForm" class="input-group">
    <span class="input-group-btn">
      <button class="btn btn-secondary" type="submit">Go!</button>
    </span>
    <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</div>

works like charm:

 <form (ngSubmit)="search()" #f="ngForm" class="input-group">
            <span class="input-group-btn">
              <button class="btn btn-secondary" type="submit">Go!</button>
            </span>
            <input type="text" ngModel class="form-control" name="search" placeholder="Search..." aria-label="Search...">
</form>

Answer 5

You must import the FormsModule and then place it in the section of imports.

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

Answer 6

Simple if you have not import module then import and declare import { FormsModule } from '@angular/forms';

and if you did then you just need to remove formControlName='whatever' from input fields.