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

ngmodel angular 5

Question

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

Tengo que comentar el <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 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";
    }

Answer 1

Alma simple: en app.module.ts

Ejemplo 1

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

Ejemplo 2

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

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

Answer 2

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, aunque tenga @Input() someInputVariableInModule1 en el module1.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 @Input() variable declarada

Answer 3

A veces, si ya hemos importado BrowserModule , FormsModule y otros módulos relacionados, pero recibo el mismo error, me di cuenta de que necesitamos importarlos en orden , en mi caso lo perdí. Entonces el orden debe ser como BrowserModule , FormsModule , ReactiveFormsModule .

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Espero que esto ayude a alguien .. :)

Answer 4

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

app.module.ts mi migración (introduje un nuevo archivo app.module.ts , app.module.ts package.json para incluir nuevas versiones y módulos faltantes, y finalmente main.ts mis main.ts para arrancar en consecuencia, según el ejemplo de inicio rápido de Angular2 ).

Hice una npm update y luego una npm outdated para confirmar que las versiones instaladas eran correctas, todavía no npm outdated suerte.

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

Answer 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);

Answer 6

En ngModule necesita importar FormsModule , porque ngModel proviene 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 { }

Answer 7

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

Answer 8

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 ng.forms.FormsModule . Después de hacer los cambios, mi propiedad de imports del método NgModule se veía a continuación

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

¡Feliz codificación!

Answer 9

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
  ],

Answer 10

Estoy usando Angular 7

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

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

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

Answer 11

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

Answer 12

Lanzar esto podría ayudar a alguien.

Suponiendo que ha creado un nuevo NgModule, digamos AuthModule dedicado a manejar sus necesidades de Auth, asegúrese de importar FormsModule en ese AuthModule también .

Si va a utilizar FormsModule SOLAMENTE en AuthModule entonces no necesitará importar FormModule IN al AppModule predeterminado

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 { }

Luego, olvídate de importar en AppModule si no usas FormsModule ningún otro lugar.

Answer 13

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

Answer 14

Necesita importar el FormsModule

Abra app.module.ts

y agrega línea

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

y

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

Answer 15

Para cualquier versión de Angular 2, debe importar FormsModule en su archivo app.module.ts y solucionará el problema.

Answer 16

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 { }

Answer 17

Para poder 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 here y la documentación oficial de los forms

Answer 18

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 busque app.module.ts y asegúrese de tener FormsModule importado 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 { }

También estos son los comentarios iniciales actuales para Angular4 ngModel en 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 de forma, puede usarla con ngModelOptions y hacer que la verdad sea ​​independiente ...

[ngModelOptions]="{standalone: true}"

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

Answer 19

Recientemente descubrí que el error ocurre no solo en el caso de que haya olvidado importar FormsModule en su módulo. En mi caso el problema estaba en este código

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Lo arreglo con change formControlName -> name

<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Enter First Name" value={{user.firstName}} [(ngModel)]="user.firstName">

Espero que esta respuesta ahorre tiempo para alguien que tiene el mismo problema.

Answer 20

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.

Answer 21

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

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

[...]

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

Answer 22

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

Answer 23

Si necesita usar [(ngModel)] primero, debe importar FormsModule en app.module.ts y luego agregar una lista de importaciones. Algo como esto:

app.module.ts

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

app.component.ts

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

Answer 24

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

permitiría que su aplicación funcione bien.

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

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

Answer 25

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

Answer 26

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 { 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 { }

y

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

imports: [
 BrowserModule,
 FormsModule
 ],

Answer 27

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

Answer 28

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 {}