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

Beim Starten meiner Angular-App wird der folgende Fehler angezeigt, auch wenn die Komponente nicht angezeigt wird.

Ich muss das auskommentieren, <input>damit meine App funktioniert.

zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
   <div>
      <label>Created:</label>
      <input  type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
   </div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 

Ich schaue auf den Hero-Plunker, sehe aber keinen Unterschied zu meinem Code.

Hier ist die Komponentendatei:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';

@Component({
   selector: 'intervention-details',
   templateUrl: 'app/intervention/details/intervention.details.html',
   styleUrls: ['app/intervention/details/intervention.details.css']
})

export class InterventionDetails
{
   @Input() intervention: Intervention;

   public test : string = "toto";
}

Ja, das war's, in der Datei app.module.ts habe ich gerade hinzugefügt:

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

[...]

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

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

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

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

Winkel / Pakete / Formulare / src / Direktiven / ng_model.ts

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

Auch wenn Sie ReactiveFormsModule verwenden, müssen Sie es ebenfalls importieren.

Suchen Sie einfach nach app.module.ts und stellen Sie sicher, dass Sie FormsModulein ...

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 ngModelin 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 verwenden ngModelOptionsund eigenständig wahr machen ...

[ngModelOptions]="{standalone: true}"

Für mehr Informationen, schauen ng_model in Schrägschnitt hier

Sie müssen das FormsModule importieren

Öffnen Sie app.module.ts

und Zeile hinzufügen

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

und

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

Einwerfen könnte jemandem helfen.

Angenommen, Sie haben ein neues NgModule erstellt, AuthModuledas sich beispielsweise mit Ihren Auth-Anforderungen befasst, stellen Sie sicher, FormsModuledass Sie es auch in dieses AuthModule importieren .

Wenn Sie das FormsModuleONLY in the verwenden, müssen AuthModuleSie das FormModuleIN nicht standardmäßig importierenAppModule

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, AppModulewenn Sie ihn FormsModulenirgendwo anders verwenden.

Einfache Lösung: 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 { }

Importieren Sie das FormsModule in die Module, in denen Sie das [(ngModel)] verwenden möchten.

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

1. Importieren Sie FormsModule in Ihr App-Modul
2. Übergeben Sie es als Wert der Importe 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

Sie müssen FormsModule in Ihr Root- Modul importieren, wenn sich diese Komponente im Root befindet, dh 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
],
})

Ich benutze Angular 7

Ich muss ReactiveFormsModule 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: []})

Importieren Sie FormsModule in Ihr App-Modul.

Dadurch würde Ihre Anwendung gut laufen.

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 verwenden müssen [(ngModel)]zuerst tun müssen , um Sie importieren FormsModulein app.module.tsund dann in einer Liste der Importe hinzuzufügen. Etwas wie das:

app.module.ts

1. importieren import {FormsModule} from "@angular/forms";
2. 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>

ngModel ist der Teil von FormsModule. Und es sollte aus @ angle / forms importiert werden, um mit ngModel zu arbeiten.

Bitte ändern Sie die app.module.ts wie folgt:

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

[...]

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

Wenn nach dem Anwenden der akzeptierten Lösung immer noch Fehler auftreten, liegt dies möglicherweise daran, dass Sie über eine separate Moduldatei für die Komponente verfügen, 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 benutze 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 weiß, dass es sich bei dieser Frage um Angular 2 handelt, aber ich bin bei Angular 4 und keine dieser Antworten hat geholfen.

In Angular 4 muss die Syntax sein

[(ngModel)]

Hoffe das hilft.

Wenn nach dem korrekten Import von FormsModule immer noch der Fehler angezeigt wird, überprüfen Sie Ihr Terminal oder (Windows-Konsole), da Ihr Projekt nicht kompiliert wird (aufgrund eines anderen Fehlers, der irgendetwas sein könnte) und Ihre Lösung nicht in Ihrem Browser angezeigt wurde!

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

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

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

@NgModule({
  imports: [
    FormsModule,
  ],

})
export class AbcModule { }

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

1. Sie haben das FormsModule nicht in das Importarray des Moduls importiert, in dem Ihre Komponente deklariert ist, 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 von 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 das FormsModule in den Import- und Export-Arrays in Modul1, damit es auch in Modell2 angezeigt werden kann

3. (In einigen Versionen war dieses Problem aufgetreten.) Sie haben das FormsModule korrekt importiert, das Problem liegt jedoch im eingegebenen HTML-Tag. Sie müssen den Namen Tag - Attribut für die Eingabe und das Objekt gebunden Namen in [(ngModel)] muss gleich sein wie der Name in den hinzufügen Name Attribut

   

In ngModulemuss man importieren FormsModule, da ngModelkommt von FormsModule. Bitte ändern Sie Ihre 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 { }

Importieren Sie FormModule und app.module

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

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

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

Sie haben beispielsweise 2 Module mit module1.componentA.component.ts und module2.componentC.component.ts und versuchen, den Selektor aus module1.componentA.component.ts in einer Vorlage innerhalb von module2 (z. B. <module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2">) zu verwenden Der Fehler, dass someInputVariableInModule1 in module1.componentA.component.ts nicht verfügbar ist - obwohl Sie das @Input() someInputVariableInModule1in module1.componentA haben.

In diesem Fall möchten Sie die 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 auf den Selektor in seinen Vorlagen zugreifen, in dem die @Input()deklarierte Variable eingefügt wird .

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, wenn wir bereits importiert BrowserModulesind FormsModuleund andere verwandte Module, obwohl ich den gleichen Fehler habe, wurde mir klar, dass wir sie in der richtigen Reihenfolge importieren müssen . In meinem Fall habe ich sie verpasst. So Ordnung sein sollte wie BrowserModule, FormsModule, ReactiveFormsModule.

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

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

Hoffe das hilft jemandem .. :)

Dies ist für Leute, die einfaches JavaScript anstelle von Type Script 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, das zu laden ng.forms.FormsModule. Nachdem ich die Änderungen vorgenommen hatte, sah meine importsEigenschaft der NgModuleMethode 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.tsDatei, Änderung package.jsonneuer Versionen und fehlender Module und schließlich Änderung meiner Datei main.tsentsprechend dem Angular2-Schnellstartbeispiel ).

Ich habe ein npm updateund dann einnpm outdated , um zu bestätigen, dass die installierten Versionen korrekt waren, immer noch kein Glück.

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

Als ich das Tutorial zum ersten Mal gemacht habe, sah main.ts etwas anders aus als jetzt. Es sieht sehr ähnlich aus, aber beachten Sie 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üge den Code zu app.module.ts hinzu Es hat bei mir funktioniert:

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

[...]

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