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

1379

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";
}
Anthony Brenelière
fuente
11
¿Qué es el recolector Hero?
IronAces
3
Tengo el mismo problema desde que actualizaron a rc5 ayer (curiosamente funciona para mi colega ...) Creo que @abreneliere está hablando de sus tutoriales - angular.io/docs/ts/latest/tutorial
PetLahev
44
@DanielShillcock, saqueador del Tour de los Héroes .
Mark Rajcok
2
Sí, me referí al tutorial del Tour de héroes porque usa un ngModel.
Anthony Brenelière
55
Solo estoy mirando Angular y vi este error al hacer el tutorial de Tour of Heroes. Efectivamente, ahora lo llaman en la siguiente línea y le dicen cómo / por qué corregirlo.
Matt Penner

Respuestas:

1925

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Anthony Brenelière
fuente
14
En realidad, prefiero esta respuesta a la de Gabriele (que es solo un enlace). Aquí se presenta el código exacto. Molesto, me encontré con este problema siguiendo la "Introducción a Angular 2" de John Paps en PluralSight, y este problema ni siquiera se mencionó. Para ellos, la unión de 2 vías simplemente funcionó.
Mike Gledhill
20
Esto funcionó, pero solo después de que lo importé a mi submódulo. Para los principiantes no está completamente claro que los submódulos no hereden esto.
adam0101
3
En mi caso, mi uso de llaves fue incorrecto. Estaba usando en [{ngModel}]lugar del correcto:[(ngModel)]
Imtiaz
29
Para aquellos que encuentran esto debido a una falla similar con Jasmine, también necesitarán agregar estas importaciones al component.spec.tsarchivo.
theMayer
3
Y para
saber
534

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.

Gabriele Ciech
fuente
99
Tengo que admitir que comencé con Angular el lunes (hace 4 días) y estaba haciendo sus tutoriales, así que estoy bastante seguro de que hice algo mal, pero para mí importar FormsModule no funcionó. Luego agregué import { FORM_DIRECTIVES } from '@angular/forms';y agregué las FORM_DIRECTIVESdirectivas a y sí, mi enlace está funcionando nuevamente (para que quede claro que estaba funcionando antes del lanzamiento de rc5)
PetLahev
2
Lo que parece estar relacionado con este stackoverflow.com/questions/31623879/…
PetLahev
1
@PetLahev, el problema que tiene con el tutorial es que el 7 de agosto, cuando comenzó, los tutoriales ejecutaban Release Candidate 4. A partir del 8 de agosto, están en Release Candidate 5, que tiene una sintaxis diferente
AJ Zane
55
FORM_DIRECTIVESestán muertos por si acaso
Toolkit
66
No vale la pena que, si está utilizando un SharedModule, es posible que también deba importar FormsModule allí.
Diferencia
243

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í

Alireza
fuente
95

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

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.

KhoPhi
fuente
Lo necesitaba en el submódulo donde estaba usando las características del formulario. Más arriba, la jerarquía no era suficiente.
Zarepheth
45

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 { }
Shashwat Gupta
fuente
28
¿Dónde está exactamente la diferencia en los dos ejemplos?
Philipp Meissner el
en mi caso, tuve que importar FormsModule en mi component.module.ts
ISFO
40

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

ingrese la descripción de la imagen aquí

Arul
fuente
39

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

modo de depuración
fuente
¡Gracias! No lo había declarado en la sección de importaciones y me estaba volviendo loco cuando moví un componente a un submódulo.
Richard
30

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
],
})
WapShivam
fuente
28

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: []})
Ved_Code_it
fuente
24

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 { }
Shashikant Pandit
fuente
22

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>
iGhost
fuente
19

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
  ],
  [...]
})
Anand Raja
fuente
18

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.

Subham Pasari
fuente
18

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
  ],
renatohlf
fuente
ReactiveFormsModulees necesario cuando lo necesita, FormGroup, FormControl ,Validatorsetc. Para usarlo ngModel, no es necesario ReactiveFormsModule.
Amit Chigadani
@AmitChigadani Agregar ReactiveFormModule es lo único que hizo que el error desapareciera en mi caso. Estoy usando Angular 7.
Eternal21
17

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.

Mate
fuente
15

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'.

mruanova
fuente
13

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }
Malindu Sandaruwan
fuente
Me faltaba esto en mi app.module.ts, ¡gracias Malindu!
Omzig
11

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)

ingrese la descripción de la imagen aquí

  • 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

ingrese la descripción de la imagen aquí

  1. (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

    ingrese la descripción de la imagen aquí

Rzv Razvan
fuente
11

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 { }
thevinaychoudhary
fuente
10

importar FormModule a app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
vaibhavkhot
fuente
9
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 {}
William Pourmajidi
fuente
8

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.

Guntram
fuente
1
Tengo este problema exacto, y usted dice que debería compartir el módulo para poder usar el componente A en ComponentC. Pero .. ¿Cómo comparto el módulo1? ¿Cuál es el sintaxis para "compartir un módulo"? Supuse que exportar el módulo 1 y luego importarlo en el módulo 2 era suficiente para compartir, pero todavía tenía este problema
Agorilla,
2
Así que para responder a mí mismo, esta es la forma de compartir un módulo angular-2-training-book.rangle.io/handout/modules/...
Agorilla
2
Hola, lo siento, no vi tu comentario tan rápido :) Sí, así es como puedes crear un SharedModule e importar tus propios módulos allí, que deseas usar en varios otros módulos. Luego importa el SharedModule donde desea usar el módulo que se importa en el compartido.
Guntram
8

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 { }
Mina Matta
fuente
8

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

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 .. :)

ganesh045
fuente
7

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!

James Poulose
fuente
6

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.

Pudriciones
fuente
5

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);
Jordan Lapp
fuente
4

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

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

[...]

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