wake-up-neo.net

Angular 4 - "Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft des 'input'-Fehlers ist

Ich verwende Angular 4 und erhalte eine Fehlermeldung in der Konsole:

Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist

Wie kann ich das beheben?

159
Vijay Kumar

Um die bidirektionale Datenbindung für Formulareingaben verwenden zu können, müssen Sie das PaketFormsModulein Ihr Angular module importieren.

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

@NgModule({
    imports: [
         FormsModule      
    ]

EDIT

Da es viele doppelte Fragen mit demselben Problem gibt, verbessere ich diese Antwort.

Es gibt zwei mögliche Gründe

  • FehlendesFormsModule, daher füge dies zu deinem Modul hinzu,

    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
            FormsModule      
        ]
    
  • Überprüfen Sie die Syntax/Schreibweise von [(ngModel)] im Eingabe-Tag

404
Sajeetharan

Dies ist eine richtige Antwort . Sie müssen FormsMoudle importieren 

zuerst 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 { }

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

Viele Grüße und Hoffnung werden hilfreich sein

10
Hatem

Ich bin auf diesen Fehler gestoßen, als ich meine Angular 6 App mit Karma/Jasmine testete. Ich hatte bereits FormsModule in mein Top-Level-Modul importiert. Als ich jedoch eine neue Komponente hinzufügte, die [(ngModel)] verwendete, fielen meine Tests aus. In diesem Fall musste ich FormsModule in meine TestBedTestingModule importieren.

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

Ihr ngModel funktioniert nicht, weil es nicht Teil Ihres NgModule ist noch.

Sie müssen dem NgModule mitteilen, dass Sie berechtigt sind, ngModel zu verwenden. in Ihrer gesamten App. Sie können dies tun, indem Sie FormsModule in Ihre app.module.ts -> imports -> [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
5
Shubham Verma

Versuchen Sie das Hinzufügen 

ngModel auf Modulebene

Der Code ist derselbe wie oben

2
Thoopalliamar

In app.module.ts fügen Sie folgendes hinzu:

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

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

enter image description here Ich habe alle oben genannten Dinge ausprobiert, aber es funktioniert immer noch nicht.

aber schließlich fand ich das Problem in Angular Site. Versuchen Sie, formModule in module.ts zu importieren, das ist es. enter image description here

1
Arpit Sharma

Alle oben genannten Lösungen für das Problem sind korrekt. Wenn Sie jedoch verzögertes Laden verwenden, muss FormsModule in das untergeordnete Modul importiert werden, das Formulare enthält. Das Hinzufügen in app.module.ts wird nicht helfen.

0
Ramya

Sie müssen diese Importe hinzufügen:

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

In meinem Fall habe ich den fehlenden Import hinzugefügt, der ReactiveFormsModule war.

0
S34N

importieren Sie zuerst FormsModule und verwenden Sie dann ngModel in Ihrer component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML Quelltext:

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

Update mit Angular 7.x.x, dasselbe Problem in einem meiner modules auftritt. 

Wenn es in Ihrem unabhängigen Modul liegt, fügen Sie diese zusätzlichen Module hinzu:

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

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

Wenn es in Ihrem app.module.ts liegt, fügen Sie folgende Module hinzu:

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

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

Eine einfache Demo , um den Fall zu beweisen. 

0
Hearen
    //import form module 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">

Wenn Sie die bidirektionale Datenbindung für Formulareingaben verwenden möchten, müssen Sie dasFormsModule-Paket in Ihr Angular-Modul importieren. Weitere Informationen finden Sie im offiziellen Angular 2-Tutorial hier und in der offiziellen Dokumentation für Formulare

fügen Sie in der app.module.ts folgende Zeilen hinzu:

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

[...]

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

Die Antwort für mich war eine falsche Schreibweise von ngModel. Ich hatte es so geschrieben: ngModule während es ngModel sein sollte.

Alle anderen Versuche schlugen offensichtlich fehl, um den Fehler für mich zu beheben.

0
Dyary

import { FormsModule } from '@angular/forms'; // <<<< hier importieren

BrowserModule, FormsModule // <<<< und hier

Also einfach nach app.module.ts oder einer anderen Moduldatei suchen und sicherstellen, dass Sie FormsModule importiert haben ...

0
Manoj Gohel