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

1379

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";
}
Anthony Brenelière
quelle
11
Was ist Hero Zupfer?
IronAces
3
Ich habe das gleiche Problem, seit sie gestern auf rc5 aktualisiert wurden (interessanterweise funktioniert es für meinen Kollegen.) Ich denke, @abreneliere spricht über ihre Tutorials - angle.io/docs/ts/latest/tutorial
PetLahev
4
@ DanielShillcock, Tour of Heroes Plunker .
Mark Rajcok
2
Ja, ich habe auf das Tutorial "Tour of Heroes" verwiesen, da es ein ngModel verwendet.
Anthony Brenelière
5
Ich starre nur Angular an und habe diesen Fehler beim Tutorial "Tour of Heroes" gesehen. Sicher genug, sie rufen dies jetzt in der nächsten Zeile auf und sagen Ihnen, wie / warum Sie es korrigieren sollen.
Matt Penner

Antworten:

1922

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

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Anthony Brenelière
quelle
14
Eigentlich ziehe ich diese Antwort Gabrieles vor (was nur ein Link ist). Hier wird der genaue Code dargestellt. Ärgerlicherweise bin ich auf dieses Problem gestoßen, als ich John Paps '"Introduction to Angular 2" auf PluralSight folgte, und dieses Problem wurde nicht einmal erwähnt. Für sie hat die 2-Wege-Bindung gerade funktioniert.
Mike Gledhill
20
Dies funktionierte, aber erst nachdem ich es in mein Untermodul importiert hatte. Anfängern ist nicht ganz klar, dass dies nicht von Submodulen vererbt wird.
Adam0101
3
In meinem Fall war meine Verwendung von Zahnspangen falsch. Ich habe [{ngModel}]anstelle des richtigen verwendet:[(ngModel)]
Imtiaz
29
Für diejenigen, die dies aufgrund eines ähnlichen Fehlers bei Jasmine finden, müssen Sie diese Importe ebenfalls zur component.spec.tsDatei hinzufügen .
theMayer
3
Und wo es hingelegt werden soll
bagsmode
534

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

Gabriele Ciech
quelle
9
Ich muss zugeben, dass ich am Montag (also vor 4 Tagen) mit Angular angefangen habe und ihre Tutorials gemacht habe, also bin ich mir ziemlich sicher, dass ich etwas falsch gemacht habe, aber für mich hat das Importieren von FormsModule nicht funktioniert. Dann habe ich import { FORM_DIRECTIVES } from '@angular/forms';die FORM_DIRECTIVESDirektiven 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)
PetLahev
2
Welches scheint mit diesem stackoverflow.com/questions/31623879/…
PetLahev
1
@PetLahev Das Problem mit dem Tutorial ist, dass am 7. August, als Sie begannen, in den Tutorials Release Candidate 4 ausgeführt wurde. Ab dem 8. August befinden sie sich in Release Candidate 5, das eine andere Syntax hat
AJ Zane,
5
FORM_DIRECTIVESsind für alle Fälle tot
Toolkit
6
Wenn Sie ein SharedModule verwenden, müssen Sie möglicherweise auch FormsModule dort importieren.
Difinity
243

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

Alireza
quelle
95

Sie müssen das FormsModule importieren

Öffnen Sie app.module.ts

und Zeile hinzufügen

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

und

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

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.

KhoPhi
quelle
Ich brauchte es im Untermodul, wo ich die Formularfunktionen verwendete. Weiter oben war die Hierarchie nicht ausreichend.
Zarepheth
45

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 { }
Shashwat Gupta
quelle
28
Wo genau liegt der Unterschied zwischen den beiden Beispielen?
Philipp Meissner
In meinem Fall musste FormsModule auf meiner component.module.ts
ISFO
40

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

Geben Sie hier die Bildbeschreibung ein

Arul
quelle
39

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

Debug-Modus
quelle
Vielen Dank! Ich hatte es im Importbereich nicht deklariert und es machte mich wahnsinnig, als ich eine Komponente in ein Untermodul verschob.
Richard
30

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
],
})
WapShivam
quelle
28

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: []})
Ved_Code_it
quelle
24

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 { }
Shashikant Pandit
quelle
22

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>
iGhost
quelle
19

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
  ],
  [...]
})
Anand Raja
quelle
18

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.

Subham Pasari
quelle
18

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
  ],
renatohlf
quelle
ReactiveFormsModulewird benötigt, wenn Sie FormGroup, FormControl ,Validatorsusw. benötigen . Für die Verwendung ngModelbenötigen Sie keine ReactiveFormsModule.
Amit Chigadani
@AmitChigadani Das Hinzufügen von ReactiveFormModule ist das einzige, was den Fehler in meinem Fall behoben hat. Ich benutze Angular 7.
Eternal21
17

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.

Matt
quelle
15

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.

mruanova
quelle
13

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 { }
Malindu Sandaruwan
quelle
Ich habe dies in meiner app.module.ts vermisst, danke Malindu!
Omzig
11

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.)

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

  1. (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

    Geben Sie hier die Bildbeschreibung ein

Rzv Razvan
quelle
11

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 { }
thevinaychoudhary
quelle
10

Importieren Sie FormModule und app.module

import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
Vaibhavkhot
quelle
9
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 {}
William Pourmajidi
quelle
8

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 .

Guntram
quelle
1
Ich habe genau dieses Problem, und Sie sagen, Sie sollten das Modul gemeinsam nutzen, damit Sie componentA in ComponentC verwenden können. Aber .. Wie teile ich das Modul1? Welches ist die Sintax, um "ein Modul zu teilen"? Ich vermutete, dass das Exportieren von Modul1 und das anschließende Importieren in Modul2 ausreichend war, aber immer noch dieses Problem hatte
Agorilla
2
Um
Agorilla
2
Hey, tut mir leid, ich habe Ihren Kommentar nicht so schnell gesehen :) Ja, so können Sie ein SharedModule erstellen und dort Ihre eigenen Module importieren, die Sie in mehreren anderen Modulen verwenden möchten. Anschließend importieren Sie das SharedModule, in das Sie das Modul verwenden möchten, das in das gemeinsam genutzte Modul importiert wird.
Guntram
8

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 { }
Mina Matta
quelle
8

Sie müssen das FormsModule importieren

Öffnen Sie app.module.ts

und Zeile hinzufügen

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

und

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

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 .. :)

ganesh045
quelle
7

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!

James Poulose
quelle
6

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.

Fäulnis
quelle
5

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);
Jordan Lapp
quelle
4

füge den Code zu app.module.ts hinzu Es hat bei mir funktioniert:

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

[...]

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