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


296

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?


28
È necessario aggiungere FormsModuleal imports: []modulo in cui si utilizza ngModel. Altrimenti pubblica il tuo codice.
Günter Zöchbauer,

9
Non riesco a pensare che tutti i nuovi sviluppatori di Angular 2 e 4 colpiranno esattamente questo problema (me compreso). Quando è stata l'ultima volta che hai usato Angular e non volevi usare ngModel da qualche parte? Non capisco perché FormsModule non sia solo incluso di default ....
Mike Gledhill il

Per quello che vale, ho riscontrato questo errore in IONIC-4 (4.11.0) durante l'utilizzo di Forms Validation. Se non faccio altro che aggiungere formControlName = "myControl" a qualsiasi <input-input> in qualsiasi punto del modulo, viene visualizzato il messaggio di errore di associazione ngModel. Proprietà alternative, come formControlName1 = "myControl" non causano questo errore.
Memetican

Risposte:


675

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


27
Qual è la relazione tra ngModel e FormsModule? Tuttavia, questo non funziona per me.
Govind,

4
FormsModule fornisce ulteriori direttive sugli elementi del modulo, inclusi input, selezione, ecc. Ecco perché è necessario. Non dimenticare di importare FormsModule nello stesso modulo che dichiara i componenti che contengono i collegamenti agli elementi del modulo.
Bob,

1
Cosa facciamo se lo stiamo usando in un file ts componente?
Mike Warren,

1
non dovresti importare all'interno component.ts
Sajeetharan,

@Sajeetharan cosa succede se ho un modello nel mio componente che utilizza ng-model in qualche elemento del modulo?
CJBrew

18

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 secondo passaggio è la modifica di app.component.ts necessaria?
Konrad Viltersten,

8

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 ]
 })

7

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

5

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.


4

In app.module.tsaggiungi questo:

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

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

6
Quale valore aggiuntivo aggiunge questa risposta alle risposte esistenti?
Günter Zöchbauer,

4
non aggiunge alcun valore alla risposta e il formato del codice è errato. Confuso per il principiante.
ssmsnet,

3
Sebbene questo frammento di codice possa risolvere la domanda, inclusa una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e quelle persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.
Clijsters il

3

inserisci qui la descrizione dell'immagineHo 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. inserisci qui la descrizione dell'immagine


2

Prova ad aggiungere

ngModel a livello di modulo

Il codice è uguale al precedente


2

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.


2

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.


Ya, questo è successo anche a me ... Modello! = Modulo Perché non mi va nel cervello!
Rahul Sonwanshi,

1

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 ...


1

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


1

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">

Ho usato il modulo in html e ho importato il modulo di moduli in app.madule.ts come importare {FormsModule} da "@ angular / form" e ho aggiunto il modulo Forms nelle importazioni.
Brahmmeswara Rao Palepu,

1

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

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


1

È 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


0

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
  ],
  [...]
})

0

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" />

0

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.