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

296

Ich verwende Angular 4 und erhalte eine Fehlermeldung in der Konsole:

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

Wie kann ich das beheben?

Vijay Kumar
quelle
28
Sie müssen hinzufügen , FormsModuleum imports: []von dem Modul , wo Sie verwenden ngModel. Andernfalls geben Sie Ihren Code ein.
Günter Zöchbauer
9
Ich kann mir nicht vorstellen, dass alle neuen Angular 2 & 4-Entwickler genau dieses Problem lösen werden (ich selbst eingeschlossen). Wann war das letzte Mal , wenn Sie Angular verwendet und nicht wollen ngModel irgendwo benutzen? Ich verstehe nicht, warum FormsModule nicht nur standardmäßig enthalten ist ...
Mike Gledhill
Ich habe diesen Fehler in IONIC-4 (4.11.0) bei der Arbeit mit der Formularvalidierung festgestellt. Wenn ich nichts anderes tue, als formControlName = "myControl" zu einem <ion-input> an einer beliebigen Stelle im Formular hinzuzufügen, wird die Fehlermeldung ngModel-Bindung angezeigt. Alternative Eigenschaften wie formControlName1 = "myControl" verursachen diesen Fehler nicht.
Memetican

Antworten:

674

Um die bidirektionale Datenbindung für Formulareingaben zu verwenden, müssen Sie das FormsModulePaket in Ihr Angular-Modul importieren .

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

@NgModule({
    imports: [
         FormsModule      
    ]

BEARBEITEN

Da es viele doppelte Fragen mit demselben Problem gibt, verbessere ich diese Antwort.

Es gibt zwei mögliche Gründe

  • Fehlt FormsModule, daher füge dies deinem Modul hinzu,

    import { FormsModule } from '@angular/forms';
    
    @NgModule({
        imports: [
            FormsModule      
        ]
  • Überprüfen Sie die Syntax / Rechtschreibung [(ngModel)]im Eingabe-Tag

Sajeetharan
quelle
27
Welche Beziehung besteht zwischen ngModel und FormsModule? Dies funktioniert jedoch nicht für mich.
Govind
4
FormsModule bietet zusätzliche Anweisungen zu Formularelementen, einschließlich Eingabe, Auswahl usw. Deshalb ist es erforderlich. Vergessen Sie nicht, FormsModule in dasselbe Modul zu importieren, das Ihre Komponenten deklariert, die Formularelementbindungen enthalten.
Bob
1
Was tun wir, wenn wir dies in einer Komponente ts-Datei verwenden?
Mike Warren
1
Sie sollten nicht in component.ts
Sajeetharan
@Sajeetharan Was ist, wenn ich eine Vorlage in meiner Komponente habe, die ng-model in einem Formularelement verwendet?
CJBrew
18

Dies ist eine richtige Antwort. Sie müssen FormsMoudle importieren

zuerst in app.module.ts

** **.

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

** Sekunde in app.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        FormsModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

Mit freundlichen Grüßen und Hoffnung wird hilfreich sein

Hatem
quelle
Ist der zweite Schritt erforderlich , um app.component.ts zu ändern ?
Konrad Viltersten
8

Du ngModelarbeitest nicht, weil es noch kein Teil von dir NgModuleist.

Sie müssen mitteilen, NgModuledass Sie die Berechtigung haben, ngModelin Ihrer gesamten App zu verwenden. Sie können dies tun, indem FormsModuleSie app.module.ts-> imports-> hinzufügen [].

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

@NgModule({

   imports: [ FormsModule ],       // HERE

   declarations: [ AppComponent ],
   bootstrap: [ AppComponent ]
 })
Shubham Verma
quelle
7

Beim Testen meiner Angular 6-App mit Karma / Jasmine ist dieser Fehler aufgetreten. Ich hatte bereits FormsModulein mein Top-Level-Modul importiert . Aber als ich eine neue Komponente hinzufügte, die [(ngModel)]meine Tests verwendete, schlug dies fehl. In diesem Fall musste ich FormsModulein meine importieren TestBed TestingModule.

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [
      FormsModule
    ],
    declarations: [
      RegisterComponent
    ]
  })
  .compileComponents();
}));
Rechnung
quelle
5

Alle oben genannten Lösungen für das Problem sind korrekt. Wenn Sie jedoch das verzögerte Laden verwenden, FormsModulemuss es in das untergeordnete Modul importiert werden, das Formulare enthält. Das Hinzufügen app.module.tswird nicht helfen.

Ramya
quelle
4

In app.module.tsfügen Sie diese:

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

@NgModule({
    declarations: [AppComponent],
    imports: [FormsModule],
})
DURGESH CHOURASIYA
quelle
6
Welchen zusätzlichen Wert bringt diese Antwort zu den vorhandenen Antworten?
Günter Zöchbauer
4
Fügt der Antwort keinen Wert hinzu und das Format des Codes ist falsch. Verwirrend für Anfänger.
ssmsnet
3
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
Clijsters
3

Geben Sie hier die Bildbeschreibung einIch habe alles versucht, was oben erwähnt wurde, aber es funktioniert immer noch nicht.

Aber schließlich habe ich das Problem in Angular gefunden. Versuchen Sie, formModule in module.ts zu importieren. Geben Sie hier die Bildbeschreibung ein

Arpit Sharma
quelle
2

Versuchen Sie es hinzuzufügen

ngModel auf Modulebene

Der Code ist der gleiche wie oben

Thoopalliamar
quelle
2

Bei einem Update mit Angular 7.xx tritt das gleiche Problem in einem meiner Module auf .

Wenn es in Ihrem unabhängigen Modul liegt, fügen Sie diese zusätzlichen Module hinzu:

import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [CommonModule, FormsModule], // the order can be random now;
  ...
})

Wenn es in Ihrem liegt app.module.ts, fügen Sie diese Module hinzu:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports:      [ FormsModule, BrowserModule ], // order can be random now
  ...
})

Eine einfache Demo , um den Fall zu beweisen.

Gehört
quelle
2

Die Antwort für mich war die falsche Schreibweise von ngModel. Ich hatte es so geschrieben: ngModulesolange es sein sollte ngModel.

Alle anderen Versuche konnten den Fehler offensichtlich nicht für mich beheben.

Dyary
quelle
Ja, das ist mir auch passiert ... Model! = Modul Warum geht das nicht in mein Gehirn!
Rahul Sonwanshi
1

import { FormsModule } from '@angular/forms'; // <<<< importiere es hier

BrowserModule, FormsModule // <<<< und hier

Suchen Sie einfach nach einer app.module.tsanderen Moduldatei und stellen Sie sicher, dass Sie FormsModulein ...

Manoj Gohel
quelle
1

In meinem Fall habe ich den fehlenden Import hinzugefügt, nämlich den ReactiveFormsModule.

S34N
quelle
1

Formularmodul in app.module.ts importieren.

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


@NgModule({
  declarations: [
    AppComponent,
    ContactsComponent
  ],
  imports: [
    BrowserModule,HttpModule,FormsModule     //Add here form  module
  ],
  providers: [],
  bootstrap: [AppComponent]
})

In HTML:

<input type="text" name="last_name" [(ngModel)]="last_name" [ngModelOptions]="{standalone: true}" class="form-control">
Brahmmeswara Rao Palepu
quelle
Ich habe Form in HTML verwendet und das Formularmodul in app.madule.ts importiert, z. B. {FormsModule} aus '@ angle / forms' importiert und dieses FormsModule in Importen hinzugefügt.
Brahmmeswara Rao Palepu
1

In meinem Fall habe ich falsch geschrieben, ich habe als ngmodel statt ng M bezeichnet odel bezeichnet :) Hoffe, es hilft!

Erwartet - [(ngModel)] Tatsächlich - [(ngmodel)]

Pragapraga
quelle
1

Sie sollten Folgendes überprüfen, wenn die bidirektionale Bindung nicht funktioniert.

In HTML sollte das ngModel so aufgerufen werden. Es besteht keine Abhängigkeit von anderen Attributen des Eingabeelements

<input [(ngModel)]="inputText">

Stellen Sie sicher, dass FormsModule in die Moduldatei importiert wird app.modules.ts

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

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent // suppose, this is the component in which you are trying to use two ay binding
    ],
    imports: [
        BrowserModule,
        FormsModule,
        // other modules
],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Stellen Sie sicher, dass die Komponente, in der Sie ngModel für die bidirektionale Bindung verwenden möchten, in den Deklarationen von hinzugefügt wird. Code, der im vorherigen Punkt 2 hinzugefügt wurde

Dies ist alles, was Sie tun müssen, damit die bidirektionale Bindung mit ngModel funktioniert. Dies wird bis zu Winkel 9 validiert

Avinash
quelle
0

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

Fügen Sie in der Datei app.module.ts die folgenden Zeilen hinzu:

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})
Swapnil G Thaware
quelle
0

Importieren Sie zuerst FormsModule und verwenden Sie dann ngModel in Ihrer component.ts

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

@NgModule({
 imports: [ 
            FormsModule  
          ];

HTML Quelltext:

<input type='text' [(ngModel)] ="usertext" />
Shakti Srivastav
quelle
0

Wenn das Problem auch nach dem Importieren des Formularmoduls weiterhin besteht, überprüfen Sie, ob Ihre Eingabe kein "Name" -Attribut mit einem Wert hat, der einer anderen Eingabe auf Seite entspricht.

Lucas Simões
quelle