Since 2.0.0.rc6:
forms: deprecated
provideForms()
anddisableDeprecatedForms()
functions have been removed. Please import theFormsModule
or theReactiveFormsModule
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.