Angular2 Error: there is no directive with the parameter "exportAs" set to "ngForm"

Question

I am on RC4 and I get an error message There is no directive with the parameter "exportAs" set to "ngForm" because of my template:

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

boot.ts:

 import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import {provideRouter} from '@angular/router'; import {APP_ROUTER_PROVIDER} from './routes'; import {AppComponent} from './app.component'; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]); 

///, so here is my DropdownList:

 <fieldset ngControlGroup="linkedProcess" > <div ngControlGroup="Process" > <label>Linked Process</label> <div class="form-group"> <select ngModel name="label" #label="ngModel" id="label" class="form-control" required (change)="reloadProcesse(list.value)" #list> <option value=""></option> <!--<option value=`{{ActionFormComponent.getFromString('GET'')}}`></option>--> <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" value="{{ processus[i].Process.label}}"> {{processus.Process.label}} </option> </select> </div> </div> 

// my ts component:

i represented him in old forms, such as:

  categoryControlGroups:ControlGroup[] = []; categories:ControlArray = new ControlArray(this.categoryControlGroups); 

and now I do this:

 categoryControlGroups:FormGroup[] = []; categories:FormArray = new FormArray(this.categoryControlGroups); 

Do you think this is the cause of the problem?

Answer 1

Starting from 2.0.0.rc6 :

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

In short:

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

So add to your app.module.ts or its 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 { } 

The absence of one of these modules can lead to errors, including the one you encountered:

Cannot bind to 'ngModel', as this is not a known property of 'input'.

Cannot bind to formGroup since this is not a known property of form

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

If in doubt, you can provide both FormsModule and ReactiveFormsModule together, but they are fully functional separately. When you provide one of these modules, the default form directives and providers from this module will be available for the entire application.

---

Older forms using ngControl ?

If you have these modules in your @NgModule , you are probably using old directives such as ngControl , which is a problem because new forms do not have ngControl . It has been replaced more or less * by ngModel .

For example, the equivalent of <input ngControl="actionType"> is <input ngModel name="actionType"> , so change it in your template.

Similarly, exporting to controls is no longer ngForm , now it is ngModel . So, in your case, replace #actionType="ngForm" with #actionType="ngModel" .

Thus, the resulting template should be ( ===> 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 ngControl functions ngControl been ported to ngModel . Some have simply been deleted or become different. An example is the name attribute, the same case that you currently have.

Answer 2

I ran into the same problem. I missed the import tag of the form module in app.module.ts

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [BrowserModule, FormsModule ], 

Answer 3

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

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

and then adding the import before starting:

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

Answer 4

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

(thanks @Undrium for the sample code ):

 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 5

The correct way to use forms is now in Angular2:

 <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 no longer works

Answer 6

I had this problem because there was a typo in my template next to [(ngModel)]]. Optional bracket. Example:

 <input id="descr" name="descr" type="text" required class="form-control width-half" [ngClass]="{'is-invalid': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr" [disabled]="isDescrReadOnly" #descr="ngModel"> 

Answer 7

I had this problem, and I realized that I did not bind my component to a variable.

Changed

<input #myComponent="ngModel"/>

at

<input #myComponent="ngModel" [(ngModel)]="myvar"/>