it-swarm.com.de

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

DIE LAGE:

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

WINKELVERSION:

Angular 2.0.0 Rc5

DER FEHLER:

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

enter image description here

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?

588
FrancescoMussi

RC5 FIX

Sie müssen import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' in Ihrem Controller eingeben und zu directives in @Component hinzufügen. Das wird das Problem beheben.

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

RC6/RC7/Final Release FIX

Um diesen Fehler zu beheben, müssen Sie nur ReactiveFormsModule aus @angular/forms in Ihr Modul importieren. Hier ist das Beispiel eines Grundmoduls mit ReactiveFormsModule Import:

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 ist formGroup ein Selektor für die Direktive FormGroupDirective, die Teil von ReactiveFormsModule ist, weshalb sie importiert werden muss. Es wird verwendet, um ein vorhandenes FormGroup an ein DOM-Element zu binden. Weitere Informationen finden Sie auf Angulars offizielle Dokumentationsseite .

1096
Stefan Svrkota

Angular 4 in Kombination mit Feature-Module (wenn Sie zum Beispiel ein Shared-Modul verwenden) erfordert, dass Sie auch ReactiveFormsModule exportieren, um zu funktionieren.

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

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

In meinem 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. Verwenden von [formGroup] in author.component.ts, das in der author.module.ts-Datei 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üge, würde ReactiveFormsModule standardmäßig von allen seinen 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 Submoduldatei importieren. Hoffe das hilft jedem.

88
Ashutosh Jha

Ich bin auf diesen Fehler beim Komponententest gestoßen (nur beim Testen, innerhalb der Anwendung hat es normal funktioniert). Die Lösung besteht darin, ReactiveFormsModule in .spec.ts 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();
    }));
});
35
xuhcc

Die vorgeschlagene Antwort funktionierte bei mir nicht mit Angular 4. Stattdessen musste ich eine andere Methode der Attributbindung mit dem Präfix attr verwenden:

<element [attr.attribute-to-bind]="someValue">
21
str

Wenn Sie zwei Module importieren müssen, fügen Sie dies 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]
})
15
sudheer nunna

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

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

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

imports: [
  FormsModule,
  ReactiveFormsModule
],
10

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

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

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

10
Ian Griffin

Dieses Problem tritt aufgrund des fehlenden Imports von FormsModule, ReactiveFormsModule .Ich kam auch mit dem gleichen Problem. Mein Fall war diff. Als ich mit Modulen arbeitete. Also habe ich die obigen Importe in meinen Elternmodulen verpasst, obwohl ich sie in Kindermodule importiert hatte, es funktionierte nicht.

Dann habe ich es wie folgt in meine Elternmodule importiert und es hat funktioniert!

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

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

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 TESTEN, Finden Sie Ihre * .specs.ts-Datei und fügen Sie hinzu:

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

Für Leute, die in diesen Threads über diesen Fehler bummeln. In meinem Fall hatte ich ein gemeinsames Modul, in dem ich nur FormsModule und ReactiveFormsModule exportierte und vergaß, es zu importieren. Dies verursachte einen seltsamen Fehler, dass Formulargruppen in Unterkomponenten nicht funktionierten. Hoffe, dies hilft Menschen, die sich am Kopf kratzen.

5
GKooij

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 erfolgreich importiert werden (config/loaders/html.js.):

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

Nach einigen Stunden Mühe und unzähligen Importen von ReactiveFormsModule sah ich, dass mein formGroup Kleinbuchstaben waren: formgroup.

Dies führte mich zum Loader und der Tatsache, dass er mein HTML auf minimierte.

Nachdem ich die Optionen geändert hatte, funktionierte alles wie es sollte und ich konnte wieder zum Weinen zurückkehren.

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.

Wenn dieses Problem bei der Entwicklung einer Komponente auftritt, sollten Sie diese beiden Module zu Ihrem nächsten 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();
  });
});
3
Hamid

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

Importieren und registrieren Sie ReactiveFormsModule in Ihrem 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. Es wird kein Fehler bei der Kompilierung ausgegeben. Wenn etwas in der HTML-Datei nicht stimmt.

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

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

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

[formsGroup], mit s nach form

1
bresleveloper

Nachdem ich mein Modul zu AppModule hinzugefügt hatte, funktionierte alles einwandfrei.

0
Leandro