Error angular: "No se puede vincular a 'ngModel' ya que no es una propiedad conocida de 'input'"

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

No se puede vincular 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 FormsModulepaquete en su módulo angular.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDITAR

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

Hay dos posibles razones

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

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

• Verifique la sintaxis / 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 de gran ayuda.

Tu ngModelno funciona porque todavía no es parte de tu NgModule.

Debe indicar NgModuleque tiene autoridad para usar en ngModeltoda su aplicación. Puede hacerlo agregando FormsModulea su app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

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

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

Todas las soluciones al problema mencionadas anteriormente son correctas. Pero si está utilizando la carga diferida, FormsModuledebe importarse en el módulo secundario que tiene formularios. Agregarlo app.module.tsno ayudará.

En app.module.tsagregar esto:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})

Intenté todo lo mencionado anteriormente, pero aún así no funciona.

pero finalmente encontré el problema en el sitio angular. Intente importar formModule en module.ts eso es todo.

Intenta agregar

ngModel en el nivel del módulo

El código es el mismo que el anterior.

Actualice con Angular 7.xx , encuentre el mismo problema en uno de mis módulos .

Si se encuentra en su módulo independiente, agregue estos módulos adicionales:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Si se encuentra en su app.module.ts, agregue estos módulos:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Una demostración simple para probar el caso.

La respuesta para mí fue una ortografía incorrecta ngModel. Lo tenía escrito así: ngModulemientras debería ser ngModel.

Todos los otros intentos obviamente no pudieron resolver el error por mí.

import { FormsModule } from '@angular/forms'; // <<<< importalo aqui

BrowserModule, FormsModule // <<<< y aquí

Así que simplemente busca app.module.tsu otro archivo de módulo y asegúrate de haber FormsModuleimportado en ...

En mi caso, agregué la importación que faltaba, que era ReactiveFormsModule.

módulo de formulario de importación en app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

En html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

En mi caso escribí mal, me refería a ngmodel en lugar de ng M odel :) ¡Espero que ayude!

Esperado - [(ngModel)] Actual - [(ngmodel)]

Debe verificar lo siguiente si el enlace bidireccional no funciona.

En html, el ngModel debería llamarse de esta manera. No hay dependencia en otro atributo del elemento de entrada

<input [(ngModel)]="inputText">

Asegúrese de que FormsModule se importe al archivo de módulos app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Asegúrese de que el componente en el que está intentando utilizar ngModel para el enlace bidireccional se agregue en las declaraciones de. Código agregado en el punto anterior # 2

Esto es todo lo que necesita hacer para que el enlace bidireccional funcione con ngModel, esto se valida hasta angular 9

Si desea utilizar el enlace de datos bidireccional para las entradas de formulario, debe importar el paquete FormsModule en su módulo angular. Para obtener más información, consulte el tutorial oficial de Angular 2 aquí y la documentación oficial para formularios

en app.module.ts agregue las siguientes líneas:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

primero importe FormsModule y luego use ngModel en su component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Código HTML:

<input type='text' [(ngModel)] ="usertext" />

Si incluso después de importar el módulo de formularios el problema persiste, verifique que su Entrada no tenga un atributo "nombre" con un valor igual a otra entrada en la página.