Hoekfout: “Kan niet binden aan ‘ngModel’ omdat het geen bekende eigenschap van ‘input’ is”

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 FormsModuleimporteren 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 ngModelwerkt niet omdat het nog geen deel uitmaakt van uw ngModule.

U moet de ngModulevertellen dat u bevoegd bent om ngModelin uw app te gebruiken. doe dit door FormsModuletoe 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 FormsModuleworden geïmporteerd in de onderliggende module die formulieren bevat. Toevoegen in app.module.tszal niet helpen.


Antwoord 5

Ik kwam deze fout tegen bij het testen van mijn Angular 6-app met Karma/Jasmine. Ik had al FormsModulegeïmporteerd in mijn hoofdmodule. Maar toen ik een nieuwe component toevoegde die [(ngModel)]gebruikte, begonnen mijn tests te mislukken. In dit geval moest ik FormsModuleimporteren in mijn TestBedTestingModule.

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

Antwoord 6

In app.module.tsvoeg 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: ngModuleterwijl het ngModelzou 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.tsliegt, 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 ReactiveFormsModulewas.


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.tsof een ander modulebestand en zorg ervoor dat je FormsModulehebt 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.

Other episodes