Pregunta No se puede enlazar 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 el 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 al plucker Hero pero no veo ninguna diferencia.

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

629
2017-08-11 09:44


origen


Respuestas:


Sí, eso es todo, en la aplicación.module.ts, acabo de agregar:

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

[...]

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

909
2017-08-11 12:30



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


402
2017-08-11 10:58



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

También está en esta ruta bajo formas en Repo Angular en github:

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

Probablemente esto no sea un placer para el Desarrolladores de AngularJs como podrías usarng-model en cualquier lugar antes, pero como Angular intenta separar los módulos para usar lo que quieras que quieras usar, ngModel está en FormsModule ahora.

También si estás usando ReactiveFormsModule, necesita importarlo también

Así que simplemente busca app.module.ts y asegúrate 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 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 en un formulario, puede usarla con ngModelOptions y hacer independiente cierto...

[ngModelOptions]="{standalone: true}"

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


119
2017-10-10 12:46



Inyectar esto podría ayudar a alguien.

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

Si vas a usar el FormsModule SOLO en el AuthModule entonces no necesitarías importar el FormModule EN el valor predeterminado AppModule

Entonces algo como esto en el 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 en AppModule si no usas el FormsModule en cualquier otro lugar.


37
2017-09-24 13:06



Hay dos pasos que debe seguir para deshacerse de este error

  1. importar FormsModule en su módulo de aplicación
  2. Pasarlo como valor de las importaciones en @NgModule decorator

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


26
2017-12-09 07:00



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

permitiría que tu 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 { }

15
2017-12-25 09:43



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

app.module.ts 

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

app.component.ts

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

14
2017-10-29 05:05



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.


11
2017-08-04 05:49



Alma simple:En app.module.ts

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

10
2018-01-25 11:09



Si alguien sigue recibiendo errores después de aplicar la solución aceptada, posiblemente sea porque 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.


8
2018-05-11 11:18