Errore angolare: "Impossibile associare 'ngModel' poiché non è una proprietà nota di 'input'”

Sto usando Angular 4 e sto ricevendo un errore nella console:

Impossibile associare 'ngModel' poiché non è una proprietà nota di 'input'

Come posso risolvere questo?

Per utilizzare l'associazione dati bidirezionale per gli input del modulo è necessario importare il FormsModulepacchetto nel modulo Angolare.

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

@NgModule({
    imports: [
         FormsModule      
    ]

MODIFICARE

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

Ci sono due possibili ragioni

• Manca FormsModule, quindi aggiungi questo al tuo modulo,

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

• Controllare la sintassi / 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

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

Devi dire NgModuleche hai l'autorità da usare in ngModeltutta la tua app, Puoi farlo aggiungendo FormsModulenel tuo app.module.ts-> imports-> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

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

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

Tutte le soluzioni al problema sopra menzionate sono corrette. Ma se si utilizza il caricamento lento, FormsModuledeve essere importato nel modulo figlio che contiene moduli. Aggiungerlo app.module.tsnon aiuta.

In app.module.tsaggiungi questo:

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

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

Ho provato tutte le cose di cui sopra, ma ancora non funziona.

ma alla fine ho riscontrato il problema nel sito angolare. Prova a importare formModule in module.

Prova ad aggiungere

ngModel a livello di modulo

Il codice è uguale al precedente

Aggiorna con Angular 7.xx , riscontra lo stesso problema in uno dei miei moduli .

Se si trova nel tuo modulo indipendente, aggiungi questi moduli extra:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Se risiede nel tuo app.module.ts, aggiungi questi moduli:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Una semplice demo per dimostrare il caso.

La risposta per me è stata un'ortografia errata di ngModel. L'ho scritto in questo modo: ngModulementre dovrebbe essere ngModel.

Tutti gli altri tentativi ovviamente non sono riusciti a risolvere l'errore per me.

import { FormsModule } from '@angular/forms'; // <<<< importalo qui

BrowserModule, FormsModule // <<<< e qui

Quindi cerca semplicemente app.module.tso un altro file del modulo e assicurati di aver FormsModuleimportato in ...

Nel mio caso ho aggiunto l'importazione mancante, che era la ReactiveFormsModule.

modulo modulo di importazione in app.module.ts.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In html:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">

Nel mio caso ho sbagliato a scrivere, mi riferivo a ngmodel prima di M odel :) Spero che aiuti!

Previsto - [(ngModel)] Effettivo - [(ngmodel)]

È necessario verificare le seguenti cose se l'associazione a due vie non funziona.

In html ngModel dovrebbe essere chiamato in questo modo. Non vi è alcuna dipendenza da altri attributi dell'elemento di input

<input [(ngModel)]="inputText">

Accertarsi che il modulo Forms sia importato nel file dei moduli app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Assicurarsi che il componente in cui si sta tentando di utilizzare ngModel per l'associazione a due vie sia aggiunto nelle dichiarazioni di. Codice aggiunto nel precedente punto n. 2

Questo è tutto ciò che devi fare per rendere il legame bidirezionale usando ngModel funziona, questo è validato fino all'angolare 9

Se si desidera utilizzare l'associazione dati bidirezionale per gli input del modulo, è necessario importare il pacchetto FormsModule nel modulo angolare. Per ulteriori informazioni, consultare il tutorial ufficiale di Angular 2 qui e la documentazione ufficiale per i moduli

in app.module.ts aggiungi le righe seguenti:

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

[...]

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

prima importare FormsModule e quindi utilizzare ngModel in component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

Codice HTML:

<input type='text' [(ngModel)] ="usertext" />

Se anche dopo aver importato il modulo moduli il problema persiste, controlla che il tuo Input non abbia un attributo "name" con valore uguale a un altro input nella pagina.