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

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'

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

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 .

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 { } 

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.

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();
    }));
});

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">

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]
})

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

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

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
],

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]
    })

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.

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';

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.

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 { }

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();
  });
});

Importieren Sie ReactiveFormsModule in das entsprechende Modul

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 { }

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.

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

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"

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

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 {}

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.

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

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

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

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