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?
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?
Risposte:
Per utilizzare l'associazione dati bidirezionale per gli input del modulo è necessario importare il FormsModule
pacchetto 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 ngModel
non funziona perché non fa ancora parte del tuo NgModule
.
Devi dire NgModule
che hai l'autorità da usare in ngModel
tutta 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 ]
})
Ho riscontrato questo errore durante il test della mia app Angular 6 con Karma / Jasmine. Avevo già importato FormsModule
nel 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 FormsModule
nel mio TestBed
TestingModule
.
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));
In app.module.ts
aggiungi questo:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [FormsModule],
})
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: ngModule
mentre 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.ts
o un altro file del modulo e assicurati di aver FormsModule
importato in ...
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.
FormsModule
alimports: []
modulo in cui si utilizzangModel
. Altrimenti pubblica il tuo codice.