Winkelfehler: "Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist."

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

Kann nicht an 'ngModel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist.

Wie kann ich das beheben?

Um die bidirektionale Datenbindung für Formulareingaben zu verwenden, müssen Sie das FormsModulePaket in Ihr Angular-Modul importieren .

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

@NgModule({
    imports: [
         FormsModule      
    ]

BEARBEITEN

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

Es gibt zwei mögliche Gründe

• Fehlt FormsModule, daher füge dies deinem Modul hinzu,

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

• Überprüfen Sie die Syntax / Rechtschreibung [(ngModel)]im Eingabe-Tag

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

Mit freundlichen Grüßen und Hoffnung wird hilfreich sein

Du ngModelarbeitest nicht, weil es noch kein Teil von dir NgModuleist.

Sie müssen mitteilen, NgModuledass Sie die Berechtigung haben, ngModelin Ihrer gesamten App zu verwenden. Sie können dies tun, indem FormsModuleSie app.module.ts-> imports-> hinzufügen [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })

Beim Testen meiner Angular 6-App mit Karma / Jasmine ist dieser Fehler aufgetreten. Ich hatte bereits FormsModulein mein Top-Level-Modul importiert . Aber als ich eine neue Komponente hinzufügte, die [(ngModel)]meine Tests verwendete, schlug dies fehl. In diesem Fall musste ich FormsModulein meine importieren TestBed TestingModule.

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

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

In app.module.tsfügen Sie diese:

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

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

Ich habe alles versucht, was oben erwähnt wurde, aber es funktioniert immer noch nicht.

Aber schließlich habe ich das Problem in Angular gefunden. Versuchen Sie, formModule in module.ts zu importieren.

Versuchen Sie es hinzuzufügen

ngModel auf Modulebene

Der Code ist der gleiche wie oben

Bei einem Update mit Angular 7.xx tritt das gleiche Problem in einem meiner Module auf .

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 liegt app.module.ts, fügen Sie diese 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.

Die Antwort für mich war die falsche Schreibweise von ngModel. Ich hatte es so geschrieben: ngModulesolange es sein sollte ngModel.

Alle anderen Versuche konnten den Fehler offensichtlich nicht für mich beheben.

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

BrowserModule, FormsModule // <<<< und hier

Suchen Sie einfach nach einer app.module.tsanderen Moduldatei und stellen Sie sicher, dass Sie FormsModulein ...

In meinem Fall habe ich den fehlenden Import hinzugefügt, nämlich den ReactiveFormsModule.

Formularmodul in app.module.ts importieren.

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

In meinem Fall habe ich falsch geschrieben, ich habe als ngmodel statt ng M bezeichnet odel bezeichnet :) Hoffe, es hilft!

Erwartet - [(ngModel)] Tatsächlich - [(ngmodel)]

Sie sollten Folgendes überprüfen, wenn die bidirektionale Bindung nicht funktioniert.

In HTML sollte das ngModel so aufgerufen werden. Es besteht keine Abhängigkeit von anderen Attributen des Eingabeelements

<input [(ngModel)]="inputText">

Stellen Sie sicher, dass FormsModule in die Moduldatei importiert wird 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 { }

Stellen Sie sicher, dass die Komponente, in der Sie ngModel für die bidirektionale Bindung verwenden möchten, in den Deklarationen von hinzugefügt wird. Code, der im vorherigen Punkt 2 hinzugefügt wurde

Dies ist alles, was Sie tun müssen, damit die bidirektionale Bindung mit ngModel funktioniert. Dies wird bis zu Winkel 9 validiert

Wenn Sie die bidirektionale Datenbindung für Formulareingaben verwenden möchten, müssen Sie das FormsModule-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 Datei app.module.ts die folgenden Zeilen hinzu:

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

[...]

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

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

Wenn das Problem auch nach dem Importieren des Formularmoduls weiterhin besteht, überprüfen Sie, ob Ihre Eingabe kein "Name" -Attribut mit einem Wert hat, der einer anderen Eingabe auf Seite entspricht.