Beim Starten der App Angular wird der folgende Fehler angezeigt, auch wenn die Komponente nicht angezeigt wird.
Ich muss den <input>
auskommentieren, 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>"): [email protected]: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 app.module.ts habe ich gerade hinzugefügt:
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
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
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
import {FormsModule} from "@angular/forms";
importierenimports: [ BrowserModule, FormsModule ],
app.component.ts
<input type="text" [(ngModel)]="name" >
<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:
(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.