Angular2: cannot bind to 'formGroup' since this is not a known property of 'form'

Question

I am new to angular 2 and I am trying to create a reactive form, but I have some problems. After many searches on the stack, I did not find any solutions.

Here you can see my mistake

Code:

View:

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

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

And my component .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(),
        })
    });
}

I do not understand my mistake because importing ReactiveForm is here. So ... I need your help :) Thanks

After I read your answer and refactoring my code, everything is fine, it works! The problem was that I imported the reactive module in the module of my contact with the page, and I need to import this into the module of my application. So thanks for your interest :)

Hope this answer helps other people.

Answer 1

, , , , . , , - .

:

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

Answer 2

<form formGroup="userForm">

<form [formGroup]="userForm">

Answer 3

ReactiveFormsModule .

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

Answer 4

userForm = new FormGroup()

form = new FormGroup() form = new FormGroup().

<form [formGroup]="form">...</form>. 6

Answer 5

, FormModule shared.module shared.module . FormModule .

Answer 6

, -, ReactiveFormsModule. ,

ngOnInt(){

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

Answer 7

, , , ReactiveFormsModule module.ts

This means that you will import your ReactiveFormsModule into your app.module.ts, as well as into your mycomponent.module.ts file