Can't bind to 'formgroup' since it isn't a known property of 'form'.

Question

Problem :

I am beginner to Angular2. Currently I am trying to create a simple form in the Angular2 app but it is not working for me. I am facing below error.

“Can't bind to 'formGroup' since it isn't a known property of 'form'.”

I am struggling on this error from couple of days. Still I don’t know how to fix above error. Is it possible for somebody to fix it for me?

Answer 1

I had faced this error before so I can help you in fixing it.

The formGroup is the selector used for the directive named FormGroupDirective which is the part of ReactiveFormsModule So you need to import it and it is used to bind the existing FormGroup to the DOM element. 

Please find below the fix for RC5.

To fix above error you just need to first import the REACTIVE_FORM_DIRECTIVES from the '@angular/forms' in your controller and after that you need also to add it to your directives in your @Component. That will certainly fix your problem.

After you fixing your problem you will almost certainly get another error as you did not add the formControlName="name" to the input in the form.

I hope my above solution helped you in fixing your error related to Angular2.

Answer 2

The error says that the FormGroup is not recognized in this module.

Solution:

To solve this error you have to import these modules in every module that uses the FormGroup.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

After that add FormModule and ReactiveFormsModule into your Module’s import array.

imports: [

  FormsModule,

  ReactiveFormsModule

],

Sometimes the user thinks that they have added already it in the AppModule and it should inherit from it. But it is not because these modules are exporting the required directives that are only available in importing modules.

Error Factors:

On factor for these errors may be spell error like below;

[Formgroup]=” form” Capital F instead of small f.

[formsGroup] = “form” extra s after form.

Another solution:

Some times this occurs due to the missing import of FormModule, ReactiveFormsModule. For this purpose you have to import it into my parent modules as below;

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';



@NgModule({

    imports: [

        BrowserModule,

        FormsModule,

        ReactiveFormsModule

    ],

    declarations: [

        AppComponent

    ],

    bootstrap: [AppComponent]

})

export class AppModule { }

I hope this will help to solve your problem.