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

angular wikipedia

Question

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?

Answer 1

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 demo simple para probar el caso.

Answer 2

En app.module.ts agregue esto:

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

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

Answer 3

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

Answer 4

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.

Answer 5

Intenta agregar

ngModel en el nivel del módulo

El código es el mismo que el anterior.

Answer 6

La respuesta es la siguiente:-

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

@ngModule({
   imports:[FormsModule];

})

Answer 7

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

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

Answer 8

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();
}));

Answer 9

Necesita agregar estas importaciones:

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

Answer 10

Para utilizar el enlace de datos bidireccional para las entradas de formulario, debe importar el paquete FormsModule 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

• Missing 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

Answer 11

Si desea utilizar el enlace de datos bidireccional para 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 de los formularios.

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

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

[...]

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

Answer 12

Su ngModel no funciona porque todavía no forma parte de su NgModule .

Tiene que decirle al NgModule que tiene autoridad para usar ngModel toda su aplicación. Puede hacerlo agregando FormsModule en su app.module.ts -> imports -> [] .

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

@NgModule({

   imports: [ FormsModule ],       // HERE

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

Answer 13

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

Answer 14

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">

Answer 15

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" />

Answer 16

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.

Answer 17

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

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

Así que simplemente busca app.module.ts u otro archivo de módulo y asegúrate de tener FormsModule importado en ...