Angular 4 – “No se puede enlazar a ‘ngModel’ ya que no es una propiedad conocida del error ‘input'”

Estoy usando Angular 4 y recibo un error en la consola:

No se puede enlazar a ‘ngModel’ ya que no es una propiedad conocida de ‘input’

¿Cómo puedo resolver esto?

Para utilizar el enlace de datos bidireccional para las entradas de formulario, debe importar el paquete FormsModule en su módulo angular.

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

EDITAR

Como hay muchas preguntas duplicadas con el mismo problema, estoy mejorando esta respuesta.

Hay dos razones posibles

  • Falta FormsModule , por lo tanto, agregue esto a su Módulo,

     import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ] 
  • Compruebe la syntax / ortografía de [(ngModel)] en la etiqueta de entrada

Esta es una respuesta correcta. necesitas importar FormsMoudle

primero en app.module.ts

**

 import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ FormsModule, ReactiveFormsModule , BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

** segundo en app.component.spec.ts

 import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, FormsModule ], declarations: [ AppComponent ], }).compileComponents(); })); 

Saludos y esperanza serán útiles

En app.module.ts agrega esto:

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [AppComponent], imports: [FormsModule], }) 

Su ngModel no funciona porque aún no forma parte de su NgModule .

Tienes que decirle al NgModule que tienes autoridad para usar ngModel en tu aplicación. Puedes hacerlo agregando FormsModule a tu app.module.ts -> imports -> [] .

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ], // HERE declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) 

Prueba agregar

ngModel en el nivel del módulo

El código es el mismo que el anterior

Me encontré con este error al probar mi aplicación Angular 6 con Karma / Jasmine. Ya había importado FormsModule en mi módulo de nivel superior. Pero cuando agregué un nuevo componente que usaba [(ngModel)] mis pruebas comenzaron a fallar. En este caso, necesitaba importar FormsModule en mi TestBed TestingModule .

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