Angular2 : ne Peut pas se lier à 'formGroup', car il n'est pas connu de la propriété de la "forme"

Je suis nouveau dans angulaire 2 et j'essaie de faire une forme réactive, mais j'ai des soucis. Après beaucoup de recherche dans la pile je n'ai pas trouvé de solutions.

Ici vous pouvez voir mon erreur

Angular2 : ne Peut pas se lier à 'formGroup', car il n'est pas connu de la propriété de la

Le code :

Vue :

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

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

Et mon composant.ts

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

Je ne comprends pas mon erreur, car l'importation de ReactiveForm est ici. Alors ... j'ai besoin de votre aide 🙂 Merci

Après j'ai lu votre réponse et de refactoring mon code, c'est ok, ça marche! Le problème était que je l'importation réactif module dans le module de ma page de contact et j'ai besoin de l'importer dans le module de mon application. Donc, merci beaucoup pour votre intérêt 🙂

Espère que cette réponse d'aider d'autres personnes, les gars.

  • Supprimer FormGroup et FormControl fom vos importations dans votre ngModule...
  • Vous avez beaucoup d'autres erreurs que vous devez l'enlever aussi.
  • Pourquoi NgModule,FormGroup et FormControl dans imports tableau de votre module ?
  • votre code semble bien fonctionner, voir est-il des différences à partir de ce plunker. plnkr.co/modifier/mSLpeHxUzjT6bxcEO3zi?p=preview
  • Je pense qu'il est ignorant totalement le fait que son code ne compile pas, de sorte que le navigateur recharge de toute façon, mais c'est toujours l'erreur qu'il a essayé de réparer avec ces étranges importations.
  • veuillez vérifier les erreurs de compilation et de les poster.
  • Pas plus de commentaire... Il est probablement mort....
  • Désolé, j'étais loin d'essayer par moi-même. C'est ok, il travail. Après la lecture de votre réponse. - Je importer reactiveform dans le module de ma page et non pas dans l'application.le module. Je suis nouveau avec le code et angulaire, et ce n'est pas vraiment facile de comprendre comment est le travail. Merci beaucoup pour votre temps

InformationsquelleAutor Cyril | 2017-04-06