Angolare 4 – “Imansible associare a ‘ngModel’ poiché non è una proprietà nota di errore ‘input'”

Per utilizzare l’associazione dati bidirezionale per gli input dei moduli è necessario importare il pacchetto FormsModule nel modulo Angular.

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

MODIFICARE

Poiché ci sono molte domande doppie con lo stesso problema, sto migliorando questa risposta.

Ci sono due possibili ragioni

• FormsModule mancante, quindi Aggiungi questo al tuo Modulo,

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

• Controlla la syntax / ortografia di [(ngModel)] nel tag di input

Questa è una risposta giusta. devi importare FormsMoudle

prima in app.module.ts

**

 import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ FormsModule, ReactiveFormsModule , BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

** secondo in app.component.spec.ts

 import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, FormsModule ], declarations: [ AppComponent ], }).compileComponents(); })); 

I migliori saluti e la speranza saranno utili

In app.module.ts aggiungi questo:

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

Il tuo ngModel non funziona perché non fa ancora parte del tuo NgModule .

Devi dire al NgModule che hai il potere di usare ngModel attraverso la tua app, puoi farlo aggiungendo FormsModule nel tuo app.module.ts -> imports -> [] .

 import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ], // HERE declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) 

Prova ad aggiungere

ngModel a livello di modulo

Il codice è lo stesso di sopra

Ho riscontrato questo errore durante il test della mia app Angular 6 con Karma / Jasmine. Avevo già importato FormsModule nel mio modulo di primo livello. Ma quando ho aggiunto un nuovo componente che utilizzava [(ngModel)] miei test hanno iniziato a fallire. In questo caso, avevo bisogno di importare FormsModule nel mio TestBed TestingModule .

 beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule ], declarations: [ RegisterComponent ] }) .compileComponents(); }));