Kann nicht an 'formGroup' gebunden werden, da es keine bekannte Eigenschaft von 'form' ist.

806

DIE SITUATION:

Bitte helfen Sie! Ich versuche, in meiner Angular2-App eine sehr einfache Form zu erstellen, aber egal, was nie funktioniert.

WINKELVERSION:

Winkel 2.0.0 Rc5

DER FEHLER:

Can't bind to 'formGroup' since it isn't a known property of 'form'

Geben Sie hier die Bildbeschreibung ein

DER CODE:

Die Aussicht:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

Der Controller:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

Das ngModule:

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

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

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

DIE FRAGE:

Warum erhalte ich diesen Fehler?

Vermisse ich etwas

FrancescoMussi
quelle

Antworten:

1412

RC5 FIX

Sie müssen import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'in Ihrem Controller und fügen Sie es directivesin @Component. Das wird das Problem beheben.

Nachdem Sie das behoben haben, wird wahrscheinlich ein weiterer Fehler angezeigt, da Sie formControlName="name"Ihre Eingabe in Form nicht hinzugefügt haben .

RC6 / RC7 / Final Release FIX

Um diesen Fehler zu beheben, müssen Sie nur ReactiveFormsModuleaus @angular/formsin Ihr Modul importieren . Hier ist das Beispiel eines Basismoduls mit ReactiveFormsModuleImport:

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

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

export class AppModule { }

Zur weiteren Erläuterung formGroupwird ein Selektor für die Direktive benannt FormGroupDirective, der Teil von ist ReactiveFormsModule, daher muss er importiert werden. Es wird verwendet, um ein vorhandenes FormGroupan ein DOM-Element zu binden . Weitere Informationen finden Sie auf der offiziellen Dokumentenseite von Angular .

Stefan Svrkota
quelle
13
Was ich nicht verstehe, ist, warum man REACTIVE_FORM_DIRECTIVES hinzufügen muss, wenn FormsModule in app.module importiert wird. Bei Modulen geht es darum, zu vermeiden, dass Direktiven innerhalb von Komponenten deklariert werden müssen.
Daniel Pliscki
19
@DanielPliscki Sie haben völlig Recht, ich habe gerade herausgefunden, dass sie dieses Problem in der heute veröffentlichten RC6-Version behoben haben. Jetzt müssen Sie dies nicht mehr tun, sondern müssen nur noch importieren FormsModuleund ReactiveFormsModule. Ich werde meine Antwort bearbeiten.
Stefan Svrkota
12
Ich habe eine Stunde verloren und vergessen, dass ich ein separates Modul für mein Anmeldeformular erstellt habe, um das Laden mit Modulen zwischen Status zu verzögern. (Ich bin neu bei A2, bevorzuge immer noch A1) Bitte stellen Sie sicher, dass Sie das richtige Modul verwenden! Sei kein Trottel wie ich. Sie müssen der Komponente auch nicht mehr hinzufügen. Die Importe in Ihr Modul reichen aus. Danke
user1889992
4
Danke, hat für mich gearbeitet. Ich bin verwirrt, warum dies in den Handbüchern für FormControls in Angular 2, über die ich gestolpert bin, nicht erwähnt wird.
cjohansson
1
In Angular 4 habe ich ReactiveFormsModulein der Anbieterliste hinzugefügt und es hat funktioniert. Ich bin mir nicht sicher, ob du es so machen sollst.
BrunoLM
151

Winkel 4 in Kombination mit Funktionsmodulen (wenn Sie beispielsweise ein gemeinsam genutztes Modul verwenden) erfordert, dass Sie das auch exportieren, um ReactiveFormsModulezu arbeiten.

import { NgModule }                                 from '@angular/core';
import { CommonModule }                             from '@angular/common';
import { FormsModule, ReactiveFormsModule }         from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 
Undrium
quelle
122

Ok, nach einigem Graben habe ich eine Lösung für "Kann nicht an 'formGroup' binden, da es keine bekannte Eigenschaft von 'form' ist" gefunden.

Für meinen Fall habe ich mehrere Moduldateien verwendet und ReactiveFormsModule in app.module.ts hinzugefügt

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

Dies funktionierte jedoch nicht, wenn ich eine [formGroup] -Direktive aus einer Komponente verwende, die in einem anderen Modul hinzugefügt wurde, z. B. [formGroup] in author.component.ts, das in der Datei author.module.ts abonniert ist:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

Ich dachte, wenn ich ReactiveFormsModule in app.module.ts hinzufügen würde, würde ReactiveFormsModule standardmäßig von allen untergeordneten Modulen wie author.module in diesem Fall geerbt ... (falsch!). Ich musste ReactiveFormsModule in author.module.ts importieren, damit alle Anweisungen funktionieren:

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

Wenn Sie Submodule verwenden, müssen Sie ReactiveFormsModule in jede Submodul-Datei importieren. Hoffe das hilft jedem.

Ashutosh Jha
quelle
1
Funktioniert für mich genau das gleiche Problem, ich dachte wirklich, dass Module im Export-Array von untergeordneten Modulen geerbt werden ... Weiß nicht warum genau! BEARBEITEN: Dokumentation besagt, dass Exporte dazu dienen sollen, Komponenten, Rohre und Anweisungen in der VORLAGE einer KOMPONENTE () verfügbar zu machen
guy777
52

Ich habe diesen Fehler beim Komponententest einer Komponente festgestellt (nur beim Testen, innerhalb der Anwendung hat es normal funktioniert). Die Lösung besteht darin, ReactiveFormsModulein eine .spec.tsDatei zu importieren :

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});
xuhcc
quelle
24

Die vorgeschlagene Antwort funktionierte bei Angular 4 nicht. Stattdessen musste ich eine andere Art der Attributbindung mit dem attrPräfix verwenden:

<element [attr.attribute-to-bind]="someValue">
str
quelle
3
Hey Mann! Sind Sie sicher, dass Ihre Antwort mit der Frage zusammenhängt? :) Die Frage war über ein Problem beim Einrichten eines Formulars - Ursache durch nicht ordnungsgemäßes Einrichten des ngModule
FrancescoMussi
1
@ Johnnyfittizio Ziemlich sicher. Gleiches Szenario, gleiche Fehlermeldung.
Str
2
Das hat bei mir funktioniert, ist aber seltsam - warum brauche ich das attr.?
CodyBugstein
Danke vielmals. Dies hat auch bei mir funktioniert, aber ich würde denken, dass es etwas anderes geben muss, das das Problem auslöst, wie z. B. die Versionierung der Bibliothek oder die Positionierung von <form> -Tags? Seltsam.
Memetican
Fand es - das Problem war, dass ich ReactiveFormsModuledirekt in meine Seiten importieren musste .module.ts. Nicht das .page.ts... Sobald ich das getan habe, konnte meine Vorlage das formGroupAttribut ohne das attr.Präfix korrekt identifizieren .
Memetican
19

Wenn Sie zwei Module importieren müssen, fügen Sie diese wie folgt hinzu

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
Sudheer Nunna
quelle
14

Beachten Sie, dass Sie, wenn Sie "Funktionsmodule" definiert haben, in das Funktionsmodul importieren müssen, auch wenn Sie bereits in das importiert haben AppModule. Aus der Angular-Dokumentation:

Module erben keinen Zugriff auf die Komponenten, Anweisungen oder Pipes, die in anderen Modulen deklariert sind. Was AppModule importiert, ist für ContactModule irrelevant und umgekehrt. Bevor ContactComponent mit [(ngModel)] binden kann, muss sein ContactModule FormsModule importieren.

https://angular.io/docs/ts/latest/guide/ngmodule.html

Ian Griffin
quelle
14

Der Fehler besagt, dass FormGroup in diesem Modul nicht erkannt wird. Sie müssen diese (unten) Module in jedes Modul importieren , das FormGroup verwendet

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

Fügen Sie dann FormsModule und ReactiveFormsModule zum Importarray Ihres Moduls hinzu .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Sie denken vielleicht, dass ich es bereits in AppModule hinzugefügt habe und es davon erben sollte? Aber es ist nicht. weil diese Module erforderliche Anweisungen exportieren, die nur beim Importieren von Modulen verfügbar sind. Lesen Sie hier mehr ... https://angular.io/guide/sharing-ngmodules .

Andere Faktoren für diese Fehler können Rechtschreibfehler wie unten sein ...

[FormGroup] = "Form" Kapital F anstelle von kleinen f

[formsGroup] = "form" Extra s nach Formular

Abhishek Singh
quelle
13

Ich hatte das gleiche Problem mit Angular 7. Importieren Sie einfach Folgendes in Ihre Datei app.module.ts.

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

Fügen Sie dann FormsModule und ReactiveFormsModule zu Ihrem Import-Array hinzu.

imports: [
  FormsModule,
  ReactiveFormsModule
],
Chamila Maddumage
quelle
1
Dies funktioniert nicht für mich in Angulat 7.
RaffAl
9

Dieses Problem tritt aufgrund des fehlenden Imports von FormsModule, ReactiveFormsModule, auf. Ich hatte auch das gleiche Problem. Mein Fall war diff. Da ich mit Modulen gearbeitet habe, habe ich die oben genannten Importe in meinen übergeordneten Modulen verpasst, obwohl ich sie in untergeordnete Module importiert hatte, funktionierte sie nicht.

Dann habe ich es wie folgt in meine übergeordneten Module importiert und es hat funktioniert!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })
Saurav
quelle
7

Für Leute, die diese Threads über diesen Fehler durchstreifen. In meinem Fall hatte ich ein gemeinsames Modul, in das ich nur das FormsModule und das ReactiveFormsModule exportierte und vergaß, es zu importieren. Dies verursachte einen seltsamen Fehler, dass Formulargruppen in Unterkomponenten nicht funktionierten. Ich hoffe, das hilft den Leuten, sich am Kopf zu kratzen.

GKooij
quelle
7

Ich bin auf diesen Fehler gestoßen, als ich versucht habe, e2e-Tests durchzuführen, und es hat mich verrückt gemacht, dass es keine Antworten darauf gab.

Wenn Sie Tests durchführen, suchen Sie Ihre * .specs.ts-Datei und fügen Sie hinzu:

import {ReactiveFormsModule, FormsModule} from '@angular/forms';
Herr Giggles
quelle
5

EIN KLEINER HINWEIS: Seien Sie vorsichtig mit Ladern und minimieren Sie (Rails env.):

Nachdem ich diesen Fehler gesehen und jede Lösung ausprobiert hatte, stellte ich fest, dass mit meinem HTML-Loader etwas nicht stimmte.

Ich habe meine Rails-Umgebung so eingerichtet, dass HTML-Pfade für meine Komponenten mit diesem Loader ( config/loaders/html.js.) erfolgreich importiert werden :

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

Nach einigen Stunden Bemühungen und unzähligen ReactiveFormsModule-Importen sah ich, dass meine formGroupKleinbuchstaben waren : formgroup.

Dies führte mich zum Loader und der Tatsache, dass mein HTML auf Minim heruntergefahren wurde.

Nachdem ich die Optionen geändert hatte, funktionierte alles so, wie es sollte, und ich konnte wieder weinen.

Ich weiß, dass dies keine Antwort auf die Frage ist, aber für zukünftige Rails-Besucher (und andere mit benutzerdefinierten Ladern) denke ich, dass dies hilfreich sein könnte.

Peter Højlund Andersen
quelle
5

Verwenden und Importieren von REACTIVE_FORM_DIRECTIVES :

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

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

export class AppModule { }
Mojtaba Ramezani
quelle
5

Wenn Sie dieses Problem bei der Entwicklung einer Komponente haben, sollten Sie diese beiden Module zu Ihrem nächstgelegenen Modul hinzufügen:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Und wenn Sie einen Test für Ihre Komponenten entwickeln, sollten Sie dieses Modul wie folgt zu Ihrer Testdatei hinzufügen:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
Hamid
quelle
5

Importieren Sie ReactiveFormsModule in das entsprechende Modul

Meghnath Das
quelle
5

Einfache Lösung:

Schritt 1: ReactiveFormModule importieren

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

Schritt 2: Fügen Sie "ReactiveFormsModule" zum Importabschnitt hinzu

imports: [

    ReactiveFormsModule
  ]

Schritt 3: Starten Sie die App neu und fertig

Beispiel:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }
Shashwat Gupta
quelle
4

Importieren und registrieren Sie ReactiveFormsModule in Ihrer app.module.ts.

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Stellen Sie sicher, dass Ihre Schreibweise sowohl in der .ts- als auch in der .html-Datei korrekt ist. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html file-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

Ich habe versehentlich [FormGroup] von [formGroup] geschrieben. Überprüfen Sie Ihre Rechtschreibung in .html richtig. Es wird kein Fehler bei der Kompilierungszeit ausgegeben, wenn in der HTML-Datei etwas nicht stimmt.

DIBYA RANJAN TRIPATHY
quelle
1
Ich habe den gleichen Fehler gemacht !! vielen Dank. in html hatte ich [FormGroup] nicht [formGroup]
tony2tones
Danke für die Rückmeldung.
DIBYA RANJAN TRIPATHY
4

Hinweis : Wenn Sie in der Komponente des untergeordneten Moduls arbeiten, müssen Sie ReactiveFormsModule nur in das untergeordnete Modul und nicht in das übergeordnete App-Stammmodul importieren

M Abdullah
quelle
4

Sei nicht so dumm wie ich. Wurde der gleiche Fehler wie oben angezeigt, funktionierte KEINE der Optionen in diesem Thread. Dann wurde mir klar, dass ich in FormGroup 'F' groß geschrieben habe. Doh!

Anstatt:

[FormGroup]="form"

Tun:

[formGroup]="form"

Flyer
quelle
1
das gleiche Problem hier
Greg
3

Wenn dies nur ein Typoskriptfehler ist, aber alles in Ihrem Formular funktioniert, müssen Sie möglicherweise nur Ihre IDE neu starten

Avi E. Koenig
quelle
3

Ich hatte das gleiche Problem. Stellen Sie sicher, dass Sie bei Verwendung von Submodulen (z. B. nicht nur app.component.module.ts, sondern auch eine separate Komponente wie login.module.ts haben, dass Sie den ReactiveFormsModule-Import in dieses Login aufnehmen .module.ts importieren, damit es funktioniert. Ich muss nicht einmal ReactiveFormsModule in meine app.component.module importieren, da ich für alles Submodule verwende.

login.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}
Peter Edwards
quelle
3

Könnte jemandem helfen:

Wenn Sie eine formGroup in einem Modal (Eintragskomponente) haben, müssen Sie ReactiveFormsModule auch in das Modul importieren, in dem das Modal instanziiert wird.

Tonertop
quelle
2

Can't bind to 'formGroup' since it isn't a known property of 'form'

bedeutet, dass Sie versuchen, eine Eigenschaft mit angle ( [prop]) zu binden, aber angle kann nichts finden, was er für dieses Element weiß (in diesem Fall)form ).

Dies kann passieren, wenn nicht das richtige Modul verwendet wird (irgendwo im Weg fehlt ein Import) und manchmal nur einen Tippfehler wie:

[formsGroup]mit snachform

Bresleveloper
quelle
0

Meine Lösung war subtil und ich habe sie nicht bereits aufgelistet gesehen.

Ich habe reaktive Formen in einer Komponente des Dialogfelds "Angular Materials" verwendet, die nicht in deklariert wurde app.module.ts. Die Hauptkomponente wurde in deklariert app.module.tsund würde die Dialogkomponente öffnen, aber die Dialogkomponente wurde nicht explizit in deklariert app.module.ts.

Ich hatte normalerweise keine Probleme mit der Verwendung der Dialogkomponente, außer dass das Formular diesen Fehler auslöste, wenn ich den Dialog öffnete.

Can't bind to 'formGroup' since it isn't a known property of 'form'.

NDavis
quelle
0

Erstens ist es nicht mit Angular-Versionen> 2 verwandt . Importieren Sie einfach das Folgende in Ihre app.module.ts-Datei, um die Probleme zu beheben.

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

Fügen Sie dann FormsModule und ReactiveFormsModule zu Ihrem Import-Array hinzu.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Hinweis : Sie können ReactiveFormsModulestattdessen auch in ein bestimmtes Modul importierenapp.module.ts

Nanda Kishore Allu
quelle
-2

Nachdem ich mein Modul hinzugefügt hatte, AppModulefunktionierte alles einwandfrei.

Leandro
quelle