Ik gebruik Angular 4 en ik krijg een foutmelding in de console:
Kan niet binden aan ‘ngModel’ omdat het geen bekende eigenschap van ‘input’ is
Hoe kan ik dit oplossen?
Antwoord 1, autoriteit 100%
Om gegevensbinding in twee richtingen te gebruiken voor formulierinvoer, moet u het pakket FormsModule
importeren in uw Angular-module.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
]
BEWERKEN
Omdat er veel dubbele vragen zijn met hetzelfde probleem, verbeter ik dit antwoord.
Er zijn twee mogelijke redenen
-
Ontbreekt
FormsModule
, dus voeg dit toe aan je module,import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ FormsModule ]
-
Controleer de syntaxis/spelling van
[(ngModel)]
in de invoertag
Antwoord 2, autoriteit 3%
Dit is een goed antwoord.
je moet FormsMoudle importeren
eerst 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 { }
**
tweede 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();
}));
Met vriendelijke groeten en ik hoop dat het u zal helpen
Antwoord 3
Uw ngModel
werkt niet omdat het nog geen deel uitmaakt van uw ngModule
.
U moet de ngModule
vertellen dat u bevoegd bent om ngModel
in uw app te gebruiken. doe dit door FormsModule
toe te voegen aan uw app.module.ts
-> imports
-> []
.
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule ], // HERE
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
Antwoord 4
Alle bovengenoemde oplossingen voor het probleem zijn correct.
Maar als je ‘lazy loading’ gebruikt, moet FormsModule
worden geïmporteerd in de onderliggende module die formulieren bevat. Toevoegen in app.module.ts
zal niet helpen.
Antwoord 5
Ik kwam deze fout tegen bij het testen van mijn Angular 6-app met Karma/Jasmine. Ik had al FormsModule
geïmporteerd in mijn hoofdmodule. Maar toen ik een nieuwe component toevoegde die [(ngModel)]
gebruikte, begonnen mijn tests te mislukken. In dit geval moest ik FormsModule
importeren in mijn TestBed
TestingModule
.
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
FormsModule
],
declarations: [
RegisterComponent
]
})
.compileComponents();
}));
Antwoord 6
In app.module.ts
voeg je dit toe:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [AppComponent],
imports: [FormsModule],
})
Antwoord 7
Het antwoord voor mij was de verkeerde spelling van ngModel
. Ik had het zo geschreven: ngModule
terwijl het ngModel
zou moeten zijn.
Alle andere pogingen slaagden er duidelijk niet in de fout voor mij op te lossen.
Antwoord 8
Ik heb al het bovenstaande geprobeerd, maar het werkt nog steeds niet.
maar uiteindelijk vond ik het probleem op de Angular-site. Probeer formModule in module.ts te importeren, dat is het.
Antwoord 9
Probeer
. toe te voegen
ngModel op moduleniveau
De code is hetzelfde als hierboven
Antwoord 10
Update met Angular 7.x.x , ontmoet hetzelfde probleem in een van mijn modules .
Als het in uw onafhankelijke module ligt, voegt u deze extra modules toe:
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [CommonModule, FormsModule], // the order can be random now;
...
})
Als het in uw app.module.ts
liegt, voeg deze modules toe:
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [ FormsModule, BrowserModule ], // order can be random now
...
})
Een eenvoudige Demo om te bewijzen de zaak.
11
In mijn geval voegde ik de ontbrekende import toe, die de ReactiveFormsModule
was.
12
Als u tweeweggegevensbinding voor formulieringangen wilt gebruiken, moet u het pakket van het formelsmodule in uw hoekmodule importeren. Zie hier voor meer informatie de OGULE 2 Officiële tutorial en de officiële documentatie voor formulieren
in de app.module.ts toevoegen hieronder regels:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
13
U moet de volgende dingen verifiëren als de twee-wijze binding niet werkt.
In HTML moet de NGMODEL op deze manier worden gebeld. Er is geen afhankelijkheid van ander attribuut van het ingangselement
<input [(ngModel)]="inputText">
Zorg ervoor dat FormsModule wordt geïmporteerd in het modulebestand
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 { }
Zorg ervoor dat de component waarin u ngModel probeert te gebruiken voor bidirectionele binding is toegevoegd in de declaraties van de. Code toegevoegd in het vorige punt #2
Dit is alles wat u moet doen om de bidirectionele binding met ngModel te laten werken, dit is gevalideerd tot hoek 9
Antwoord 14
Na uren aan dit probleem te hebben besteed, vond hier
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule
]
})
Antwoord 15
import { FormsModule } from '@angular/forms';
//<<<< importeer het hier
BrowserModule, FormsModule
//<<<< en hier
Zoek dus gewoon naar app.module.ts
of een ander modulebestand en zorg ervoor dat je FormsModule
hebt geïmporteerd in…
Antwoord 16
formuliermodule importeren 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">
Antwoord 17
In mijn geval heb ik het verkeerd gespeld, ik verwees naar ngmodel in plaats van ngModel 🙂 Ik hoop dat het helpt!
Verwacht – [(ngModel)]
Werkelijk – [(ngmodel)]
Antwoord 18
importeer eerst FormsModule en gebruik vervolgens ngModel in uw component.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
];
HTML-code:
<input type='text' [(ngModel)] ="usertext" />
Antwoord 19
Als zelfs na het importeren van de formulierenmodule het probleem zich blijft voordoen, controleer dan of uw Input geen attribuut “name” heeft met een waarde die gelijk is aan een andereinvoer op de pagina.
Antwoord 20
in hoek 7 moet je “ReactiveFormsModule” importeren.
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
Ik heb dit probleem opgelost door deze import. Het zou je helpen.