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

Question

I m new in angular 2 and i try to make a reactive form but i have some trouble  After many search in stack i found no solutions    Here you can see my error     The code     View      lt main gt       lt div class  container  gt           lt h2 gt User data lt  h2 gt           lt form  formGroup   userForm  gt               lt div class  form-group  gt                   lt label gt name lt  label gt                   lt input type  text  class  form-control  formControlName  name  gt               lt  div gt               lt div class  form-group  gt                   lt label gt email lt  label gt                   lt input type  text  class  form-control  formControlName  email  gt               lt  div gt               lt div class    formGroupName  adresse  gt                   lt div class  form-group  gt                       lt label gt Rue lt  label gt                       lt input type  text  class  form-control  formControlName  rue  gt                   lt  div gt                   lt div class  form-group  gt                       lt label gt Ville lt  label gt                       lt input type  text  class  form-control  formControlName  ville  gt                   lt  div gt                   lt div class  form-group  gt                       lt label gt Cp lt  label gt                       lt input type  text  class  form-control  formControlName  cp  gt                   lt  div gt               lt  div gt               lt button type  submit  class  btn btn-primary  gt Submit lt  button gt           lt  form gt       lt  div gt   lt  main gt    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 don t understand my error because import of ReactiveForm is here  So     i need your help    Thanks  After I read your answer and refactoring my code  it s ok  that works  The problem was i import reactive module in the module of my page contact and i need import this in module of my app  So thanks a lot for your interest      Hope this answer help another people guys

User · Answer

import the ReactiveForms Module to your components module

User · Answer

I had the same problem and I solved the problem in another way  without import ReactiveFormsModule  You may be but this block in   ngOnInt         userForm   new FormGroup           name  new FormControl            email  new FormControl            adresse  new FormGroup               rue  new FormControl                ville  new FormControl                cp  new FormControl

User · Answer

For those still struggling with the error  make sure that you also import ReactiveFormsModule in your component  s module ts file  meaning that you will import your ReactiveFormsModule in your app module ts and also in your mycomponent module ts file

User · Answer

Try to add ReactiveFormsModule in your component as well   import   FormGroup  FormArray  FormBuilder            Validators ReactiveFormsModule    from   angular forms

User · Answer

I think that this is an old error that you tried to fix by importing random things in your module and now the code does not compile anymore  while you don t pay attention to the shell output  the browser reload  and you still get the same error   Your module should be     NgModule     imports        CommonModule      FormsModule      ReactiveFormsModule        declarations        ContactComponent        export class ContactModule

User · Answer

Don t use userForm   new FormGroup    Use form   new FormGroup   instead    And in the form use  lt form  formGroup   form  gt      lt  form gt   It works for me with angular 6

User · Answer

try with    lt form formGroup  userForm  gt   instead of   lt form  formGroup   userForm  gt

User · Answer

I have solved it by importing FormModule in a shared module and importing the shared module in all other modules  My case is the FormModule is used in multiple modules

[angular] Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

Examples related to angular