Impossibile associare '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 in <input>modo che la mia app funzioni .

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: 

Sto guardando il plunker di Hero, ma non vedo alcuna differenza dal mio codice.

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ì, in app.module.ts, ho appena aggiunto:

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

[...]

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

Per poter utilizzare l'associazione dati bidirezionale per gli input del modulo è necessario importare il FormsModulepacchetto nel Angularmodulo. Per ulteriori informazioni, consultare il Angular 2tutorial ufficiale qui e la documentazione ufficiale per i moduli

Per l'utilizzo [(ngModel)]in Angolare 2 , 4 e 5+ , è necessario importare il Modulo dal modulo angolare ...

Inoltre è in questo percorso sotto forme in repo angolare in github :

angolare / pacchetti / forme / src / direttive / ng_model.ts

Probabilmente questo non è un vero piacere per gli sviluppatori di AngularJs poiché potresti usare ng-model ovunque in qualsiasi momento prima, ma mentre Angular cerca di separare i moduli per usare quello che vorresti che tu volessi usare in quel momento, ngModel è ora in FormsModule .

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

Quindi cerca semplicemente app.module.ts e assicurati di aver FormsModuleimportato 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 iniziale per Angular4 ngModelin 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!
 */

Se desideri utilizzare il tuo input, non in un modulo, puoi usarlo con ngModelOptionse rendere autonomo vero ...

[ngModelOptions]="{standalone: true}"

Per maggiori informazioni, guarda ng_model nella sezione angolare qui

È necessario importare il modulo Forms

Apri app.module.ts

e aggiungi linea

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

e

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

Lanciarlo potrebbe aiutare qualcuno.

Supponendo che si è creato un nuovo NgModule, diciamo AuthModulededicato a gestire le vostre esigenze Auth, assicuratevi di importazione FormsModulein quel AuthModule troppo .

Se utilizzerai FormsModuleSOLO in AuthModule, non dovrai importare FormModuleIN per impostazione predefinitaAppModule

Quindi qualcosa di simile nel 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 dimentica di importare AppModulese non usi FormsModulealtrove.

Simple Soultion: in app.module.ts

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

Importa il FormsModule in quei moduli in cui desideri utilizzare il [(ngModel)]

Esistono due passaggi che è necessario seguire per eliminare questo errore

1. importa FormsModule nel modulo dell'app
2. Passalo come valore delle importazioni in @NgModule decorator

sostanzialmente app.module.ts dovrebbe apparire come sotto:

    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

È necessario importare FormsModule nel modulo radice se questo componente si trova nella radice, ad esempio app.module.ts

Si prega di aprire app.module.ts

Importa ModuloModulo da @ angolare / forme

Ex:

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

e

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

Sto usando Angular 7

Devo importare ReactiveFormsModule perché sto usando la classe FormBuilder per creare una forma reattiva.

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

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

importa FormsModule nel tuo modulo app.

farebbe funzionare bene 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 avete bisogno di usare [(ngModel)]prima fare è necessario importare FormsModulein app.module.tse quindi aggiungere in un elenco di importazioni. Qualcosa come questo:

app.module.ts

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

app.component.ts

1. Esempio: <input type="text" [(ngModel)]="name" >
2. e poi <h1>your name is: {{name}} </h1>

ngModel è la parte di FormsModule. E dovrebbe essere importato da @ angular / forms per funzionare con ngModel.

Modifica app.module.ts come segue:

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

[...]

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

Se qualcuno continua a ricevere errori dopo aver applicato la soluzione accettata, è possibile che tu abbia un file di modulo separato per il componente in cui desideri utilizzare la proprietà ngModel nel tag di input. In tal caso, applicare anche la soluzione accettata nel file module.ts del componente.

Sto usando Angular 5.

Nel mio caso, dovevo importare anche RactiveFormsModule.

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

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

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

So che questa domanda riguarda Angular 2, ma sono su Angular 4 e nessuna di queste risposte ha aiutato.

In Angular 4 la sintassi deve essere

[(ngModel)]

Spero che sia di aiuto.

se stai ancora riscontrando l'errore dopo aver importato correttamente FormsModule, controlla nel tuo terminale o (console di Windows) perché il tuo progetto non si 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 riscontrato il seguente errore non correlato: la proprietà 'retrieveGithubUser' non esiste sul tipo 'ApiService'.

Nel modulo sei disposto a usare ngModel devi importare FormsModule

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

ngModel proviene da FormsModule. In alcuni casi è possibile ricevere questo tipo di errore:

1. Non è stato importato FormsModule nell'array di importazione del modulo in cui è dichiarato il componente, componente in cui viene utilizzato ngModel.
2. Il modulo Forms è stato importato in un modulo ereditato da un altro modulo. In questo caso hai due opzioni:
   • lasciare che FormsModule sia importato nell'array di importazione da entrambi i moduli: module1 e module2. Come regola: l'importazione di un modulo NON fornisce l'accesso ai suoi moduli importati (le importazioni non sono ereditate)

• dichiarare il modulo Forms nelle matrici di importazione ed esportazione in module1 come abble per vederlo anche nel modello2

3. (In alcune versioni ho riscontrato questo problema) Hai importato correttamente il FormsModule ma il problema è nel tag HTML di input. È necessario aggiungere l'attributo nome del tag per l'ingresso e il nome legato oggetto in [(ngModel)] deve essere lo stesso del nome nel nome dell'attributo

   

In ngModuleè necessario importare FormsModule, perché ngModelproviene da FormsModule. Modifica la tua app.module.ts come il seguente codice che ho condiviso

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

import FormModule an app.module

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

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

A volte viene visualizzato 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 di module2 (ad es. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ), genererà l'errore che someInputVariableInModule1 non è disponibile in module1.componentA.component.ts, anche se è presente @Input() someInputVariableInModule1in module1.componentA.

In tal caso, si desidera condividere module1.componentA per renderlo accessibile in altri moduli. Pertanto, se condividi module1.componentA all'interno di unModule condiviso, module1.componentA sarà utilizzabile all'interno di altri moduli (all'esterno di module1) e ogni modulo che importa ilModule condiviso sarà in grado di accedere al selettore nei loro modelli iniettando la @Input()variabile dichiarata.

Per il mio scenario, ho dovuto importare sia [CommonModule] che [FormsModule] nel 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 { }

È necessario importare il modulo Forms

Apri app.module.ts

e aggiungi linea

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

e

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

A volte se stiamo già importato BrowserModule, FormsModulee di altri relativi moduli anche se ho ottenuto lo stesso errore poi ho capito che abbiamo bisogno di loro importazione per garantire , nel mio caso ho perso. Così ordine dovrebbe essere come 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 {}

Spero che questo aiuti qualcuno .. :)

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

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

dovresti anche dire al caricatore del modulo di caricare il file ng.forms.FormsModule. Dopo aver apportato le modifiche, la mia importsproprietà del NgModulemetodo è risultata come di seguito

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

Buona programmazione!

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

Ho completato la mia migrazione (introducendo un nuovo app.module.tsfile, cambiando package.jsonper includere nuove versioni e moduli mancanti e infine cambiando il mio main.tsper avviarlo di conseguenza, in base all'esempio di avvio rapido di Angular2 ).

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

Ho finito per cancellare completamente la node_modulescartella e reinstallare con npm install- Voila! Problema risolto.

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

aggiungi il codice a app.module.ts Ha funzionato per me:

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

[...]

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