web-dev-qa-db-fra.com

Angular2: Impossible de se lier à 'formGroup' car ce n'est pas une propriété connue de 'form'

Je suis nouveau dans angular 2 et j'essaie de créer une forme réactive mais j'ai quelques problèmes. Après de nombreuses recherches dans la pile, je n’ai trouvé aucune solution. 

Ici vous pouvez voir mon erreur 

 enter image description here

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 avoir lu votre réponse et refacturé mon code, ça va, ça marche! Le problème était que j'importais un module réactif dans le module de ma page contact et que j'avais besoin d'importer ceci dans le module de mon application. Merci beaucoup pour votre intérêt :) 

J'espère que cette réponse aidera d'autres gars.

angular
14
Cyril

Je pense que c’est une vieille erreur que vous avez essayé de corriger en important des choses aléatoires dans votre module et que le code ne se compile plus. alors que vous ne faites pas attention à la sortie du shell, le navigateur se recharge et vous obtenez toujours la même erreur.

Votre module devrait être:

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

Essayez d’ajouter ReactiveFormsModule à votre composant.

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

essayer avec 

<form formGroup="userForm">

au lieu de

<form [formGroup]="userForm">

1
Lleopardi

Je l'ai résolu en important FormModule dans un module partagé et en important le module partagé dans tous les autres modules. Mon cas est le FormModule est utilisé dans plusieurs modules.

0
juana pu

N'utilisez pas userForm = new FormGroup()

Utilisez form = new FormGroup() à la place. 

Et dans le formulaire, utilisez <form [formGroup]="form"> ...</form>. Cela fonctionne pour moi avec angular 6

0
Hategekimana Ernest