Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Question

i\'m on the RC4 and i\'m getting the error There is no directive with \"exportAs\" set to \"ngForm\" because of my template :

        
                      

              相关标签:
       
      

Answer 1

The correct way of use forms now in Angular2 is:

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

The old way doesn't works anymore

Answer 2

if ngModule is not working in input means try...remove double quotes around ngModule

like

<input #form="ngModel" [(ngModel)]......></input>

instead of above

<input #form=ngModel [(ngModel)]......></input> try this

Answer 3

I had the same problem which was resolved by adding the FormsModule to the .spec.ts:

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

and then adding the import to beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

Answer 4

Since 2.0.0.rc6:

forms: deprecated provideForms() and disableDeprecatedForms() functions have been removed. Please import the FormsModule or the ReactiveFormsModule from @angular/forms instead.

In short:

• If you use template-driven forms, add FormsModule to your @NgModule.
• If you use model-driven forms, add ReactiveFormsModule to your @NgModule.

So, add to your app.module.ts or equivalent:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; // <== add the imports!
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Failing to have one of these modules can lead to errors, including the one you face:

Can't bind to 'ngModel' since it isn't a known property of 'input'.

Can't bind to 'formGroup' since it isn't a known property of 'form'

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

If you're in doubt, you can provide both the FormsModule and the ReactiveFormsModule together, but they are fully-functional separately. When you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide.

---

Old Forms using ngControl?

If you do have those modules at your @NgModule, perhaps you are using old directives, such as ngControl, which is a problem, because there's no ngControl in the new forms. It was replaced more or less* by ngModel.

For instance, the equivalent to <input ngControl="actionType"> is <input ngModel name="actionType">, so change that in your template.

Similarly, the export in controls is not ngForm anymore, it is now ngModel. So, in your case, replace #actionType="ngForm" with #actionType="ngModel".

So the resulting template should be (===>s where changed):

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

* More or less because not all functionality of ngControl was moved to ngModel. Some just were removed or are different now. An example is the name attribute, the very case you are having right now.

Answer 5

In my case I had to add FormsModule and ReactiveFormsModule to the shared.module.ts too:

(thanks to @Undrium for the code example):

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Answer 6

Check that you have both ngModel and name attributes in your select. Also Select is a form component and not the entire form so more logical declaration of local reference will be:-

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

One more Important thing is make sure you import either FormsModule in the case of template driven approach or ReactiveFormsModule in the case of Reactive approach. Or you can import both which is also totally fine.