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

Tengo el siguiente error al iniciar mi aplicación Angular, incluso si el componente no se muestra.

Tengo que comentar <input>para que mi aplicación funcione.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Estoy mirando el plunker Hero, pero no veo ninguna diferencia con respecto a mi código.

Aquí está el archivo componente:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

Sí, eso es todo, en app.module.ts, acabo de agregar:

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

[...]

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

Para poder utilizar el enlace de datos bidireccional para entradas de formulario, debe importar el FormsModulepaquete en su Angularmódulo. Para obtener más información, consulte el Angular 2tutorial oficial aquí y la documentación oficial de los formularios.

Para usar [(ngModel)]en Angular 2 , 4 y 5+ , debe importar FormsModule de forma angular ...

También está en este camino bajo formas en repositorio angular en github :

angular / packages / forms / src / directives / ng_model.ts

Probablemente esto no sea un gran placer para los desarrolladores de AngularJs, ya que podría usar ng-model en todas partes en cualquier momento antes, pero como Angular intenta separar los módulos para usar lo que quiera usar en ese momento, ngModel está en FormsModule ahora .

Además, si está utilizando ReactiveFormsModule, también debe importarlo.

Así que simplemente busca app.module.ts y asegúrate de haber FormsModuleimportado en ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Además, estos son los comentarios iniciales actuales para Angular4 ngModelen FormsModule :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

Si desea utilizar su entrada, no en una forma, que se puede utilizar con ngModelOptionsy hacer independiente cierto ...

[ngModelOptions]="{standalone: true}"

Para más información, mira ng_model en la sección angular aquí

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

Lanzar esto podría ayudar a alguien.

Suponiendo que haya creado un nuevo NgModule, digamos AuthModulededicado a la manipulación de sus necesidades de autenticación, asegúrese de importar FormsModuleen que AuthModule demasiado .

Si va a utilizar FormsModuleÚNICAMENTE en el, AuthModuleentonces no necesitaría importar el FormModuleIN por defectoAppModule

Entonces algo como esto en AuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Entonces olvídate de importar AppModulesi no usas el FormsModuleotro lugar.

Alma simple: en app.module.ts

Ejemplo 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Ejemplo 2

Si desea utilizar [(ngModel)], debe importar FormsModule en app.module.ts

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

Importe el FormsModule en los módulos en los que desea usar el [(ngModel)]

Hay dos pasos que debe seguir para deshacerse de este error

1. importa FormsModule en el módulo de tu aplicación
2. Pásalo como valor de las importaciones en el decorador @NgModule

básicamente app.module.ts debería verse a continuación:

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

Espero eso ayude

Debe importar FormsModule en su módulo raíz si este componente está en la raíz, es decir, app.module.ts

Abra amablemente app.module.ts

Importar FormsModule desde @ angular / forms

Ex:

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

y

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

Estoy usando Angular 7

Tengo que importar ReactiveFormsModule porque estoy usando la clase FormBuilder para crear un formulario reactivo.

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

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

importa FormsModule en tu módulo de aplicación.

permitiría que su aplicación funcione bien.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Si es necesario utilizar [(ngModel)]primero hacer lo necesario para importar FormsModuleen app.module.tsy luego añadir en una lista de las importaciones. Algo como esto:

app.module.ts

1. importar import {FormsModule} from "@angular/forms";
2. agregar en importaciones imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Ejemplo: <input type="text" [(ngModel)]="name" >
2. y entonces <h1>your name is: {{name}} </h1>

ngModel es la parte de FormsModule. Y debe importarse desde @ angular / forms para trabajar con ngModel.

Cambie app.module.ts de la siguiente manera:

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

[...]

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

Si alguien sigue recibiendo errores después de aplicar la solución aceptada, podría deberse a que tiene un archivo de módulo separado para el componente en el que desea utilizar la propiedad ngModel en la etiqueta de entrada. En ese caso, aplique la solución aceptada en el archivo module.ts del componente también.

Estoy usando Angular 5.

En mi caso, también necesitaba importar RactiveFormsModule.

app.module.ts (o anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Sé que esta pregunta es sobre Angular 2, pero estoy en Angular 4 y ninguna de estas respuestas me ayudó.

En Angular 4, la sintaxis debe ser

[(ngModel)]

Espero que esto ayude.

si aún recibe el error después de importar FormsModule correctamente, luego verifique su terminal o (consola de Windows) porque su proyecto no se está compilando (debido a otro error que podría ser cualquier cosa) y su solución no se ha reflejado en su navegador.

En mi caso, mi consola tenía el siguiente error no relacionado: la propiedad 'retrieveGithubUser' no existe en el tipo 'ApiService'.

En el módulo que está dispuesto a usar ngModel , debe importar FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel proviene de FormsModule. Hay algunos casos en los que puede recibir este tipo de error:

1. No importó el FormsModule en la matriz de importación del módulo donde se declara su componente, componente en el que se usa el ngModel.
2. Ha importado FormsModule en un módulo que se hereda de otro módulo. En este caso tienes dos opciones:
   • deje que FormsModule se importe a la matriz de importación desde ambos módulos: módulo1 y módulo2. Como regla: la importación de un módulo NO proporciona acceso a sus módulos importados (las importaciones no se heredan)

• declare el FormsModule en las matrices de importación y exportación en el módulo1 para que también pueda verlo en el modelo2

3. (En alguna versión me enfrenté a este problema). Ha importado correctamente el FormsModule pero el problema está en la etiqueta HTML de entrada. Debe agregar el atributo de etiqueta de nombre para la entrada y el nombre vinculado al objeto en [(ngModel)] debe ser el mismo que el nombre en el atributo de nombre

   

En ngModulelo que necesita para importar FormsModule, porque ngModelestá viniendo de FormsModule. Modifique su app.module.ts como el siguiente código que he compartido

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

importar FormModule a app.module

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

A veces aparece este error cuando intenta utilizar un componente de un módulo, que no se comparte, en un módulo diferente.

Por ejemplo, tiene 2 módulos con module1.componentA.component.ts y module2.componentC.component.ts e intenta usar el selector de module1.componentA.component.ts en una plantilla dentro del módulo2 (por ejemplo <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">), arrojará el error de que someInputVariableInModule1 no está disponible dentro de module1.componentA.component.ts, a pesar de que tiene @Input() someInputVariableInModule1el módulo1.componentA.

Si esto sucede, desea compartir el module1.componentA para que sea accesible en otros módulos. Entonces, si comparte el module1.componentA dentro de un SharedModule, el module1.componentA se podrá usar dentro de otros módulos (fuera del módulo1), y cada módulo que importe el sharedModule podrá acceder al selector en sus plantillas inyectando la @Input()variable declarada.

Para mi escenario, tuve que importar [CommonModule] y [FormsModule] a mi módulo

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

A veces, si ya estamos importados BrowserModule, FormsModuley otros módulos relacionados, aunque recibí el mismo error, me di cuenta de que necesitamos importarlos en orden , en mi caso lo perdí. Así que el fin debe ser como BrowserModule, FormsModule, ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule     
  ],
  providers: [],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Espero que esto ayude a alguien .. :)

Esto es para las personas que usan JavaScript simple en lugar de Type Script. Además de hacer referencia al archivo de secuencia de comandos de formularios en la parte superior de la página como a continuación

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

también debe decirle al cargador del módulo que cargue el ng.forms.FormsModule. Después de hacer los cambios, mi importspropiedad del NgModulemétodo se ve a continuación

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

¡Feliz codificación!

Actualicé de RC1 a RC5 y recibí este error.

Completé mi migración (introduje un nuevo app.module.tsarchivo, cambié package.jsonpara incluir nuevas versiones y módulos faltantes, y finalmente cambié mi main.tspara arrancar en consecuencia, según el ejemplo de inicio rápido de Angular2 ).

Hice un npm updatey luego un npm outdatedpara confirmar que las versiones instaladas eran correctas, todavía no tuve suerte.

Terminé limpiando completamente la node_modulescarpeta y reinstalando con npm install- ¡Voila! Problema resuelto.

Cuando hice el tutorial por primera vez, main.ts se veía ligeramente diferente de lo que es ahora. Se ve muy similar, pero tenga en cuenta las diferencias (la superior es correcta).

Correcto:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Código tutorial anterior:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

agregue el código a app.module.ts Funcionó para mí:

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

[...]

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