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

Um die bidirektionale Datenbindung für Formulareingaben verwenden zu können, müssen Sie das Paket FormsModule in Ihr Modul Angular importieren. Weitere Informationen finden Sie im Angular 2 offiziellen Tutorial hier und in der offiziellen Dokumentation für Formulare

Für die Verwendung von [(ngModel)] in Winkel 2 , 4 & 5 + , Sie müssen FormsModule aus Angular Formular importieren ...

Auch ist es in diesem Pfad unter Formen in Angular Repo in Github :

angle/packages/forms/src/directives/ng_model.ts

Wahrscheinlich ist dies kein großes Vergnügen für die AngularJs-Entwickler , da Sie ng-model jederzeit und überall verwenden können, aber als Angular versucht, Module zu trennen, um das zu verwenden, was Sie zu der Zeit verwenden möchten. ngModel befindet sich in FormsModule jetzt.

Auch wenn Sie ReactiveFormsModule verwenden, muss es ebenfalls importieren.

Also einfach nach app.module.ts suchen und sicherstellen, dass FormsModule importiert wurde in ...

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  //<<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Dies sind auch die aktuellen Startkommentare für Angular4 ngModel in FormsModule :

/**
 * `ngModel` forces an additional change detection run when its inputs change:
 * E.g.:
 * ```
 * <div>{{myModel.valid}}</div>
 * <input [(ngModel)]="myValue" #myModel="ngModel">
 * ```
 * I.e. `ngModel` can export itself on the element and then be used in the template.
 * Normally, this would result in expressions before the `input` that use the exported directive
 * to have and old value as they have been
 * dirty checked before. As this is a very common case for `ngModel`, we added this second change
 * detection run.
 *
 * Notes:
 * - this is just one extra run no matter how many `ngModel` have been changed.
 * - this is a general problem when using `exportAs` for directives!
 */

Wenn Sie Ihre Eingabe nicht in einem Formular verwenden möchten, können Sie sie mit ngModelOptions verwenden und Standalone true ...

[ngModelOptions]="{standalone: true}"

Weitere Informationen finden Sie unter ng_model in Angular section here

Sie müssen das FormsModule importieren

Öffnen Sie app.module.ts

und Zeile hinzufügen

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

und

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

Das könnte jemandem helfen.

Angenommen, Sie haben ein neues NgModule erstellt, sagen Sie AuthModule, um Ihre Authentifizierungsanforderungen zu erfüllen, und importieren Sie FormsModule in dieses AuthModule auch.

Wenn Sie FormsModule NUR in AuthModule verwenden, müssen Sie FormModule nicht in die Standardeinstellung AppModule importieren.

Also so etwas in der AuthModule:

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

import { authRouting } from './auth.routing';
import { LoginComponent, SignupComponent } from './auth.component';

@NgModule({
  imports:      [ 
    authRouting,
    FormsModule
   ],
  declarations: [ 
    SignupComponent,
    LoginComponent
  ]
})
export class AuthModule { }

Vergessen Sie dann den Import in AppModule, wenn Sie FormsModule nirgendwo anders verwenden.

Sie müssen zwei Schritte ausführen, um diesen Fehler zu beheben

1. importieren Sie FormsModule in Ihr App-Modul
2. Übergeben Sie es als Importwert in @NgModule decorator

grundsätzlich sollte app.module.ts wie folgt aussehen:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule }   from '@angular/forms';       
    import { AppComponent }  from './app.component';
    import {AppChildComponent} from './appchild.component';
    @NgModule({
      imports:      [ BrowserModule,FormsModule ],
      declarations: [ AppComponent, AppChildComponent ],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

Ich hoffe es hilft

Simple Soultion: In app.module.ts

Beispiel 1

import {FormsModule} from "@angular/forms";  
// add in imports 

imports: [
 BrowserModule,
 FormsModule
 ],

Beispiel 2

Wenn Sie [(ngModel)] verwenden möchten, müssen Sie FormsModule in app.module.ts importieren

import { FormsModule  } from "@angular/forms";     
@NgModule({
  declarations: [
    AppComponent, videoComponent, tagDirective, 
  ],
  imports: [
    BrowserModule,  FormsModule

  ],
  providers: [ApiServices],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sie müssen FormsModule in Ihr root Modul importieren, wenn sich diese Komponente im root befindet, d. H. app.module.ts

Bitte öffnen Sie app.module.ts

Importieren Sie FormsModule aus @ angle/forms

Ex:

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

und

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

importieren FormsModule in Ihr App-Modul.

es würde Ihre Anwendung gut laufen lassen.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {ContactListCopmponent} from './contacts/contact-list.component';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],
  declarations: [
    AppComponent,ContactListCopmponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Wenn Sie zuerst [(ngModel)] verwenden müssen, müssen Sie FormsModule in app.module.ts importieren und dann eine Liste von Importen hinzufügen. Etwas wie das:

app.module.ts

1. import {FormsModule} from "@angular/forms"; importieren
2. in Importe hinzufügen imports: [ BrowserModule, FormsModule ],

app.component.ts

1. Beispiel: <input type="text" [(ngModel)]="name" >
2. und dann <h1>your name is: {{name}} </h1>

Ich verwende Angular 5.

In meinem Fall musste ich auch RactiveFormsModule importieren.

app.module.ts (oder anymodule.module.ts)

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

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],

Ich verwende Angular 7

Ich muss RactiveFormsModule importieren, da ich die FormBuilder-Klasse verwende, um ein reaktives Formular zu erstellen.

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

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

wenn der Fehler nach dem korrekten Import von FormsModule weiterhin auftritt, überprüfen Sie Ihr Terminal oder (Windows-Konsole), da Ihr Projekt nicht kompiliert wird (aufgrund eines anderen Fehlers, der alles Mögliche sein könnte) und Ihre Lösung nicht in Ihrem Browser wiedergegeben wurde!

In meinem Fall hatte meine Konsole den folgenden Fehler: Die Eigenschaft 'retrieveGithubUser' existiert nicht für den Typ 'ApiService'.

Wenn nach dem Anwenden der akzeptierten Lösung weiterhin Fehler auftreten, liegt dies möglicherweise daran, dass Sie eine separate Moduldatei für die Komponente haben, in der Sie die Eigenschaft ngModel im Eingabe-Tag verwenden möchten. Wenden Sie in diesem Fall die akzeptierte Lösung auch in der Datei module.ts der Komponente an.

Ich weiß, dass es bei dieser Frage um Angular 2 geht, aber ich bin bei Angular 4 und keine dieser Antworten hat geholfen.

In Angular 4 muss die Syntax sein

[(ngModel)]

Hoffe das hilft.

In dem Modul, das Sie verwenden möchten ngModel, müssen Sie FormsModule importieren

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

In ngModule müssen Sie FormsModule importieren, da ngModel von FormsModule stammt. Bitte ändern Sie Ihr app.module.ts wie den folgenden Code, den ich geteilt habe

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [
         AppComponent,
         HomeComponent
    ],
    imports: [
         BrowserModule,
         AppRoutingModule,
         FormsModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

ngModel kommt von FormsModule. In einigen Fällen können Sie diese Art von Fehler erhalten:

1. Sie haben das FormsModule nicht in das Import-Array des Moduls importiert, in dem Ihre Komponente deklariert ist, die Komponente, in der das ngModel verwendet wird.
2. Sie haben das FormsModule in ein Modul importiert, das von einem anderen Modul geerbt wird. In diesem Fall haben Sie zwei Möglichkeiten:
   • lassen Sie das FormsModule aus beiden Modulen in das Import-Array importieren: Modul1 und Modul2. In der Regel: Durch das Importieren eines Moduls wird KEIN Zugriff auf die importierten Module gewährt. (Importe werden nicht vererbt.)

• deklarieren Sie FormsModule in den Import- und Export-Arrays in Modul1, damit es auch in Modell2 angezeigt werden kann

3. (In einigen Versionen war ich mit diesem Problem konfrontiert.) Sie haben das FormsModule korrekt importiert, aber das Problem liegt im HTML-Eingabe-Tag. Sie müssen das Attribut name tag für die Eingabe hinzufügen, und der objektgebundene Name in [(ngModel)] muss mit dem Namen im Attribut name identisch sein

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule     
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Für mein Szenario musste ich sowohl [CommonModule] als auch [FormsModule] in mein Modul importieren

import { NgModule } from '@angular/core' 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 

import { MyComponent } from './mycomponent'

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [
        MyComponent 
    ]
 }) 
export class MyModule { }

Sie müssen das FormsModule importieren

Öffnen Sie app.module.ts

und Zeile hinzufügen

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

und

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

Manchmal wird dieser Fehler angezeigt, wenn Sie versuchen, eine Komponente aus einem Modul, das nicht freigegeben ist, in einem anderen Modul zu verwenden.

Beispielsweise haben Sie 2 Module mit module1.componentA.component.ts und module2.componentC.component.ts und Sie versuchen, den Selektor von module1.componentA.component.ts in einer Vorlage in module2 zu verwenden (z. B. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ) wird der Fehler ausgegeben, dass someInputVariableInModule1 in module1.componentA.component.ts nicht verfügbar ist - obwohl in module1.componentA die @Input() someInputVariableInModule1 vorhanden ist.

In diesem Fall möchten Sie die Komponente "module1.componentA" freigeben, um in anderen Modulen darauf zugreifen zu können. Wenn Sie also die module1.componentA in einem sharedModule freigeben, kann die module1.componentA in anderen Modulen (außerhalb von module1) verwendet werden, und jedes Modul, das das sharedModule importiert, kann in seinen Vorlagen auf den Selektor zugreifen, indem es die deklarierte Variable @Input() einfügt.

Dies ist für Leute, die einfaches JavaScript anstelle von Typenskript verwenden. Zusätzlich zum Verweisen auf die Formularskriptdatei oben auf der Seite wie unten

<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>

sie sollten auch den Modullader anweisen, den ng.forms.FormsModule zu laden. Nachdem ich die Änderungen vorgenommen habe, sah meine imports -Eigenschaft der NgModule -Methode wie folgt aus

imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],

Viel Spaß beim Codieren!

Ich habe ein Upgrade von RC1 auf RC5 durchgeführt und diesen Fehler erhalten.

Ich habe meine Migration abgeschlossen (Einführung einer neuen app.module.ts -Datei, Änderung von package.json, um neue Versionen und fehlende Module einzuschließen, und schließlich Änderung von main.ts, um entsprechend zu booten, basierend auf Angular2 Schnellstart-Beispiel ).

Ich habe einen npm update und dann einen npm outdated durchgeführt, um zu bestätigen, dass die installierten Versionen korrekt waren, immer noch kein Glück.

Am Ende habe ich den Ordner node_modules komplett gelöscht und mit npm install neu installiert - Voila! Problem gelöst.

Als ich das Tutorial zum ersten Mal durchführte, sah main.ts etwas anders aus als jetzt. Es sieht sehr ähnlich aus, beachte aber die Unterschiede (der obere ist korrekt).

Richtig:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Alter Tutorial-Code:

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Für jede Version von Angular 2 müssen Sie FormsModule in Ihre Datei app.module.ts importieren, um das Problem zu beheben.

Vor kurzem habe ich festgestellt, dass Fehler nicht nur dann auftreten, wenn Sie den Import von FormsModule in Ihr Modul vergessen haben. In meinem Fall lag das Problem in diesem Code

<input type="text" class="form-control" id="firstName"
                   formControlName="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Ich behebe es mit change formControlName -> name

<input type="text" class="form-control" id="firstName"
                   name="firstName" placeholder="Enter First Name" 
                   value={{user.firstName}} [(ngModel)]="user.firstName">

Ich hoffe, diese Antwort spart Zeit für jemanden, der das gleiche Problem hat.