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

javascript angular typescript input


Tengo el siguiente error al lanzar 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 al Héroe,pero no veo ninguna diferencia con mi código.

Aquí está el archivo del 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 Anthony Brenelière


Sí,eso es,en el app.module.ts,acabo de añadir..:

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

[...]

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



Answer 2 Gabriele Ciech


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 aquí y la documentación oficial de los formularios.




Answer 3 Alireza


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 aquí




Answer 4 PRao


Necesitas importar el Módulo de Formas

Abra app.module.ts

y añadir una línea

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

and

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



Answer 5 KhoPhi


Añadir esto podría ayudar a alguien.

Suponiendo que haya creado un nuevo NgModule, dicen AuthModule dedicado a la manipulación de sus necesidades de autenticación, asegúrese de importar FormsModule en que AuthModule demasiado .

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 en ningún otro lugar.