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";
}
javascript
angular
typescript
input
Anthony Brenelière
quelle
quelle
Antworten:
Ja, das war's, in der Datei app.module.ts habe ich gerade hinzugefügt:
quelle
[{ngModel}]
anstelle des richtigen verwendet:[(ngModel)]
component.spec.ts
Datei hinzufügen .Um die bidirektionale Datenbindung für Formulareingaben verwenden zu können, müssen Sie das
FormsModule
Paket in IhrAngular
Modul importieren . Weitere Informationen finden Sie imAngular 2
offiziellen Tutorial hier und in der offiziellen Dokumentation für Formularequelle
import { FORM_DIRECTIVES } from '@angular/forms';
dieFORM_DIRECTIVES
Direktiven hinzugefügt und hinzugefügt und ja, meine Bindung funktioniert wieder (um klar zu sein, dass sie vor der Veröffentlichung von rc5 funktioniert hat)FORM_DIRECTIVES
sind für alle Fälle totFü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 :
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
FormsModule
in ...Dies sind auch die aktuellen Startkommentare für Angular4
ngModel
in FormsModule :Wenn Sie Ihre Eingabe nicht in einem Formular verwenden möchten, können Sie sie mit verwenden
ngModelOptions
und eigenständig wahr machen ...Für mehr Informationen, schauen ng_model in Schrägschnitt hier
quelle
Sie müssen das FormsModule importieren
Öffnen Sie app.module.ts
und Zeile hinzufügen
und
quelle
Einwerfen könnte jemandem helfen.
Angenommen, Sie haben ein neues NgModule erstellt,
AuthModule
das sich beispielsweise mit Ihren Auth-Anforderungen befasst, stellen Sie sicher,FormsModule
dass Sie es auch in dieses AuthModule importieren .Wenn Sie das
FormsModule
ONLY in the verwenden, müssenAuthModule
Sie dasFormModule
IN nicht standardmäßig importierenAppModule
Also so etwas in der
AuthModule
:Vergessen Sie dann den Import,
AppModule
wenn Sie ihnFormsModule
nirgendwo anders verwenden.quelle
Beispiel 1
Beispiel 2
quelle
Importieren Sie das FormsModule in die Module, in denen Sie das [(ngModel)] verwenden möchten.
quelle
Es gibt zwei Schritte, die Sie ausführen müssen, um diesen Fehler zu beheben
Grundsätzlich sollte app.module.ts wie folgt aussehen:
Ich hoffe es hilft
quelle
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:
und
quelle
Ich benutze Angular 7
Ich muss ReactiveFormsModule importieren, da ich die FormBuilder-Klasse verwende, um ein reaktives Formular zu erstellen.
quelle
Importieren Sie FormsModule in Ihr App-Modul.
Dadurch würde Ihre Anwendung gut laufen.
quelle
Wenn Sie verwenden müssen
[(ngModel)]
zuerst tun müssen , um Sie importierenFormsModule
inapp.module.ts
und dann in einer Liste der Importe hinzuzufügen. Etwas wie das:app.module.ts
import {FormsModule} from "@angular/forms";
imports: [ BrowserModule, FormsModule ],
app.component.ts
<input type="text" [(ngModel)]="name" >
<h1>your name is: {{name}} </h1>
quelle
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:
quelle
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.
quelle
Ich benutze Angular 5.
In meinem Fall musste ich auch RactiveFormsModule importieren.
app.module.ts (oder anymodule.module.ts)
quelle
ReactiveFormsModule
wird benötigt, wenn SieFormGroup, FormControl ,Validators
usw. benötigen . Für die VerwendungngModel
benötigen Sie keineReactiveFormsModule
.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
Hoffe das hilft.
quelle
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.
quelle
In dem Modul, in dem Sie ngModel verwenden möchten , müssen Sie FormsModule importieren
quelle
ngModel kommt von FormsModule. In einigen Fällen können Sie diese Art von Fehler erhalten:
(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
quelle
In
ngModule
muss man importierenFormsModule
, dangModel
kommt vonFormsModule
. Bitte ändern Sie Ihre app.module.ts wie den folgenden Code, den ich geteilt habequelle
Importieren Sie FormModule und app.module
quelle
quelle
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() someInputVariableInModule1
in 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 .quelle
Für mein Szenario musste ich sowohl [CommonModule] als auch [FormsModule] in mein Modul importieren
quelle
Sie müssen das FormsModule importieren
Öffnen Sie app.module.ts
und Zeile hinzufügen
und
quelle
Manchmal, wenn wir bereits importiert
BrowserModule
sindFormsModule
und 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 wieBrowserModule
,FormsModule
,ReactiveFormsModule
.Hoffe das hilft jemandem .. :)
quelle
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
Sie sollten auch den Modullader anweisen, das zu laden
ng.forms.FormsModule
. Nachdem ich die Änderungen vorgenommen hatte, sah meineimports
Eigenschaft derNgModule
Methode wie folgt ausimports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
Viel Spaß beim Codieren!
quelle
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, Änderungpackage.json
neuer Versionen und fehlender Module und schließlich Änderung meiner Dateimain.ts
entsprechend dem Angular2-Schnellstartbeispiel ).Ich habe ein
npm update
und dann einnpm outdated
, um zu bestätigen, dass die installierten Versionen korrekt waren, immer noch kein Glück.Am Ende habe ich den
node_modules
Ordner komplett gelöscht und neu installiert mitnpm install
- Voila! Problem gelöst.quelle
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:
Alter Tutorial-Code:
quelle
füge den Code zu app.module.ts hinzu Es hat bei mir funktioniert:
quelle