Angular 2+ and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select'

Solution 1:

>= RC.5

The FormsModule needs to be imported to make ngModel available

@NgModule({
  imports: [BrowserModule /* or CommonModule */, 
  FormsModule, ReactiveFormsModule],
  ...
)}
class SomeModule {}

<= RC.4

In config.js add

'@angular/forms': {
  main: 'bundles/forms.umd.js',
  defaultExtension: 'js'
},

in main.ts add

import {provideForms, disableDeprecatedForms} from '@angular/forms';

bootstrap(App, [disableDeprecatedForms(),provideForms()])

Plunker example

See also

• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

Solution 2:

In app.modules.ts after

import { NgModule } from '@angular/core'; 

put:

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

And then in

imports: [
 BrowserModule
 ],

insert the FormsModule something like:

imports: [
 BrowserModule,
 FormsModule
 ],

Solution 3:

This was happening to me in my testing suite, despite the fact that I'd already imported FormsModule in my component's *.module.ts file.

In my *.component.spec.ts file, I needed to add both FormsModule and ReactiveFormsModule to the imports list in configureTestingModule:

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

...
TestBed.configureTestingModule({
    imports: [ 
        FormsModule, 
        ReactiveFormsModule,
        ....],
    providers: [MyComponent, ...],
    declarations: [MyComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

This fixed my case.