Imansible eseguire il binding a “ngModel” poiché non è una proprietà nota di “input”

Ho riscontrato il seguente errore all’avvio della mia app Angular, anche se il componente non è visualizzato.

Devo commentare il modo in cui la mia app funziona.

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

Sto guardando il coglitore Eroe ma non vedo alcuna differenza.

Ecco il file 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"; } 

Sì, è così, nel app.module.ts, ho appena aggiunto:

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

Per poter utilizzare l’associazione dati bidirezionale per gli input dei moduli è necessario importare il pacchetto FormsModule nel modulo Angular . Per maggiori informazioni consulta il tutorial ufficiale di Angular 2 qui e la documentazione ufficiale per i moduli

Per utilizzare [(ngModel)] in Angular 2 , 4 e 5+ , è necessario importare FormsModule dal modulo Angolare …

Inoltre è in questo percorso sotto forms in repository angular in github :

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

Probabilmente questo non è un grande piacere per gli sviluppatori di AngularJs dato che puoi usare ng-model ovunque in qualsiasi momento prima, ma dato che Angular prova a separare i moduli per usare quello che vorresti usare, ngModel ora è in FormsModule .

Inoltre, se si utilizza ReactiveFormsModule, è necessario importarlo anche.

Quindi cerca semplicemente app.module.ts e assicurati di aver importato FormsModule in …

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

Anche questo è l'attuale commento di partenza per Angular4 ngModel in FormsModule :

 /** * `ngModel` forces an additional change detection run when its inputs change: * Eg: * ``` * 
{{myModel.valid}}
* * ``` * Ie `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! */

Se desideri utilizzare il tuo input, non in un modulo, puoi usarlo con ngModelOptions e renderlo autonomo true ...

 [ngModelOptions]="{standalone: true}" 

Per maggiori informazioni, guarda ng_model nella sezione Angolare qui

Lanciare questo potrebbe aiutare qualcuno.

Supponendo di aver creato un nuovo NgModule, ad esempio AuthModule dedicato alla gestione delle tue esigenze di FormsModule , assicurati di importare FormsModule in quel AuthModule.

Se utilizzerai il FormsModule SOLO in AuthModule , non dovrai importare FormModule AppModule predefinito

Quindi qualcosa di simile in 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 { } 

Quindi dimenticarsi dell’importazione in AppModule se non si utilizza FormsModule altrove.

Ci sono due passaggi che devi seguire per eliminare questo errore

  1. importa FormsModule nel modulo dell’app
  2. Passalo come valore delle importazioni nel decoratore @NgModule

fondamentalmente app.module.ts dovrebbe apparire come di seguito:

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

Spero che sia d’aiuto

importa FormsModule nel tuo modulo dell’app.

lascerebbe funzionare la tua applicazione.

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

Se devi usare [(ngModel)] prima cosa devi importare FormsModule in app.module.ts e poi aggiungere un elenco di importazioni. Qualcosa come questo:

app.module.ts

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

app.component.ts

  1. Esempio:
  2. e poi

    your name is: {{name}}

So che questa domanda riguarda Angular 2, ma sono su Angular 4 e nessuna di queste risposte è stata d’aiuto.

In Angular 4 la syntax deve essere

 [(ngModel)] 

Spero che questo ti aiuti.

Simple Soultion: in app.module.ts

 ***Example 1*** import {FormsModule} from "@angular/forms"; // add in imports imports: [ BrowserModule, FormsModule ], 

Esempio 2 :

Se si desidera utilizzare [(ngModel)], è necessario importare FormsModule in app.module.ts

 import { FormsModule } from "@angular/forms"; @NgModule({ declarations: [ AppComponent, videoComponent, tagDirective, ], imports: [ BrowserModule, FormsModule ], providers: [ApiServices], bootstrap: [AppComponent] }) export class AppModule { } 

Se qualcuno continua a ricevere errori dopo aver applicato la soluzione accettata, potrebbe essere ansible perché si dispone di un file modulo separato per il componente in cui si desidera utilizzare la proprietà ngModel nel tag di input. In tal caso, applicare la soluzione accettata anche nel file module.ts del componente.

Sto usando Angular 5.

Nel mio caso, avevo bisogno di importare anche RactiveFormsModule.

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

 import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ], 
 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 {} 

se ricevi ancora l’errore dopo aver importato correttamente FormsModule, controlla il tuo terminale o (console di windows) perché il tuo progetto non sta compilando (a causa di un altro errore che potrebbe essere qualsiasi cosa) e la tua soluzione non si è riflessa nel tuo browser!

Nel mio caso, la mia console ha il seguente errore non correlato: la proprietà ‘retrieveGithubUser’ non esiste sul tipo ‘ApiService’.

Questo è per le persone che usano JavaScript semplice invece di Type Script. Oltre a fare riferimento al file di script dei moduli nella parte superiore della pagina come di seguito

  

dovresti anche dire al loader del modulo di caricare il ng.forms.FormsModule . Dopo aver apportato le modifiche, la proprietà delle mie imports del metodo NgModule è stata la seguente

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

Buona programmazione!

A volte si ottiene questo errore quando si tenta di utilizzare un componente da un modulo, che non è condiviso, in un modulo diverso.

Ad esempio, hai 2 moduli con module1.componentA.component.ts e module2.componentC.component.ts e provi a utilizzare il selettore da module1.componentA.component.ts in un modello all’interno del modulo2 (ad esempio ), genera l’errore che someInputVariableInModule1 non è disponibile all’interno di module1.componentA.component.ts – anche se si ha @Input() someInputVariableInModule1 nel module1.componentA.

Se ciò accade, si desidera condividere module1.componentA per essere accessibili in altri moduli. Quindi se condividi il modulo1.componentA all’interno di un modulo condiviso, il modulo1.componentA sarà utilizzabile all’interno di altri moduli (all’esterno del modulo1), e ogni modulo che importa il modulo condiviso sarà in grado di accedere al selettore nei loro modelli iniettando l’ @Input() variabile dichiarata.

Per il mio scenario, ho dovuto importare sia [CommonModule] che [FormsModule] sul mio modulo

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

Quando ho fatto il tutorial per la prima volta, main.ts sembrava leggermente diverso da quello che è ora. Sembra molto simile, ma nota le differenze (quella in alto è corretta).

Corretta:

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

Vecchio codice tutorial:

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

Ho aggiornato da RC1 a RC5 e ho ricevuto questo errore.

Ho completato la migrazione (introducendo un nuovo file app.module.ts , cambiando package.json per includere nuove versioni e moduli mancanti e infine cambiando i miei main.ts per avviare di conseguenza, in base all’esempio di avvio rapido Angular2 ).

Ho fatto un npm update e poi un npm outdated per confermare che le versioni installate erano corrette, ancora senza fortuna.

Ho finito per cancellare completamente la cartella node_modules e reinstallarla con npm install – Voila! Problema risolto.

Nel modulo che si desidera utilizzare ngModel è necessario importare FormsModule

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

Per qualsiasi versione di Angular 2, è necessario importare FormsModule nel file app.module.ts e risolverà il problema.