wake-up-neo.com

Angular2: Kann nicht an 'formGroup' binden, da es keine bekannte Eigenschaft von 'form' ist

Ich bin neu in Winkel 2 und ich versuche, eine reaktive Form zu schaffen, aber ich habe einige Probleme. Nach vielen Stapelsuchen fand ich keine Lösung. 

Hier kannst du meinen Fehler sehen 

 enter image description here

Der Code : 

Aussicht : 

<main>
    <div class="container">
        <h2>User data</h2>
        <form [formGroup]="userForm">
            <div class="form-group">
                <label>name</label>
                <input type="text" class="form-control" formControlName="name">
            </div>
            <div class="form-group">
                <label>email</label>
                <input type="text" class="form-control" formControlName="email">
            </div>
            <div class="" formGroupName="adresse">
                <div class="form-group">
                    <label>Rue</label>
                    <input type="text" class="form-control" formControlName="rue">
                </div>
                <div class="form-group">
                    <label>Ville</label>
                    <input type="text" class="form-control" formControlName="ville">
                </div>
                <div class="form-group">
                    <label>Cp</label>
                    <input type="text" class="form-control" formControlName="cp">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</main>

Meine module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ContactComponent } from './contact.component';
import { FormGroup , FormControl , ReactiveFormsModule , FormsModule } from '@angular/forms';


@NgModule({
  imports: [
    NgModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormGroup,
    FormControl
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}

Und meine Komponente

import {Component} from '@angular/core';
import { FormGroup , FormControl } from '@angular/forms';

@Component({
  selector: 'contact',
  templateUrl: './contact.component.html'
  // styleUrls: ['../../app.component.css']
})
export class ContactComponent {

    userForm = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup({
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        })
    });
}

Ich verstehe meinen Fehler nicht, weil der Import von ReactiveForm hier ist. Also ... ich brauche deine Hilfe :) Danke

Nachdem ich Ihre Antwort gelesen und meinen Code überarbeitet habe, ist es in Ordnung, das funktioniert! Das Problem war, dass ich reaktive Module in das Modul meines Seitenkontakts importiere und ich muss dieses Modul in meiner App importieren. Vielen Dank für Ihr Interesse :) 

Hoffe, diese Antwort hilft anderen Leuten.

14
Cyril

Ich denke, dies ist ein alter Fehler, den Sie durch Importieren von zufälligen Dingen in Ihrem Modul zu beheben versucht haben und der Code jetzt nicht mehr kompiliert wird. Wenn Sie die Shell-Ausgabe nicht beachten, wird der Browser neu geladen, und Sie erhalten immer noch die gleiche Fehlermeldung.

Ihr Modul sollte sein:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    ContactComponent
  ]
})
export class ContactModule {}
39
n00dl3

Versuchen Sie auch, ReactiveFormsModule in Ihre Komponente aufzunehmen.

import { FormGroup, FormArray, FormBuilder,
          Validators,ReactiveFormsModule  } from '@angular/forms';
3
Ravindra Urlam

versuche es mit 

<form formGroup="userForm">

anstatt

<form [formGroup]="userForm">

1
Lleopardi

Ich habe es gelöst, indem ich FormModule in ein shared.module importiere und das shared.module in alle anderen Module importiere. Mein Fall ist, dass das FormModule in mehreren Modulen verwendet wird.

0
juana pu

Stellen Sie sicher, dass Sie auch ReactiveFormsModule in die Datei module.ts Ihrer Komponente importieren

das bedeutet, dass Sie Ihr ReactiveFormsModule in Ihre app.module.ts und auch in Ihre mycomponent.module.ts -Datei importieren

0
Seloka

Verwenden Sie nicht userForm = new FormGroup()

Verwenden Sie stattdessen form = new FormGroup()

Und im Formular verwenden Sie <form [formGroup]="form"> ...</form>. Es funktioniert bei mir mit Winkel 6

0

Ich hatte das gleiche Problem und habe es auf andere Weise gelöst, ohne ReactiveFormsModule zu importieren. Sie können aber dieser Block in sein

ngOnInt(){

    userForm = new FormGroup({
        name: new FormControl(),
        email: new FormControl(),
        adresse: new FormGroup({
            rue: new FormControl(),
            ville: new FormControl(),
            cp: new FormControl(),
        })
     });
)
0