1360

The situation

I am trying to make what should be a very simple form in my Angular application, but no matter what, it never works.

The Angular version

Angular 2.0.0 RC5

The error

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

Enter image description here

The code

The view

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

The controller

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder)
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    }
}

The ngModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

The question

Why am I getting that error? Am I missing something?

5
  • 14
    Make sure that you import the ReactiveFormsModule to the module you use forms with ( for instance auth.module , form.module ) not the app.module . angular.io/guide/reactive-forms
    – mercury
    Commented Jan 27, 2021 at 2:51
  • 4
    I wish I could downvote the Angular team for making the design decisions they made
    – Felipe
    Commented Oct 19, 2021 at 12:32
  • I occasionally get this error message in VS Code, although my code is correct. I just have to open the xxx.module.ts file and the problems go away immediately. Maybe someone else have the same problem...might be a bug which will be fixed in the future. Commented Jan 27, 2022 at 14:25
  • None of the answers below solved my problem. my problem was not adding my component to module declarations. So add your component to app.module.ts declarations: [YourComponent]
    – Aven Desta
    Commented Mar 18, 2022 at 5:04
  • If you already have the ReactiveFormsModule imported to your component, this error can be a red herring! Be sure you've also added a reference of your module to your app module's imports.
    – jbobbins
    Commented Nov 22, 2022 at 1:02

52 Answers 52

2258

RC6/RC7/Final release FIX

To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here's the example of a basic module with ReactiveFormsModule import:

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

To explain further, formGroup is a selector for directive named FormGroupDirective that is a part of ReactiveFormsModule, hence the need to import it. It is used to bind an existing FormGroup to a DOM element. You can read more about it on Angular's official docs page.

RC5 FIX

You need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' in your controller and add it to directives in @Component. That will fix the problem.

After you fix that, you will probably get another error because you didn't add formControlName="name" to your input in form.

13
  • 19
    What I don't get is why one needs to add REACTIVE_FORM_DIRECTIVES if FormsModule is being imported inside app.module. The whole point of modules is to avoid having to declare directives inside components. Commented Sep 1, 2016 at 14:21
  • 27
    @DanielPliscki You are completely right, I just found out they fixed this problem in RC6 version that was released today. Now you don't need to do this, you only need to import FormsModule and ReactiveFormsModule. I will edit my answer. Commented Sep 1, 2016 at 14:24
  • 18
    I LOST AN HOUR completing forgetting that I created a separate module for my login form in order to lazy load with modules between states. (I am new to A2, still prefer A1) Please make sure you use the right module! Don't be a schmuck like me. You also no longer need to add to the component. The imports in your module suffice. Thanks Commented Mar 18, 2017 at 23:55
  • 5
    Thanks, worked for me. I am confused why this is not mentioned in the guides for FormControls in Angular 2 that I have stumbled upon..
    – cjohansson
    Commented Apr 19, 2017 at 8:14
  • 2
    In Angular 4 I added ReactiveFormsModule in the provider list and it worked. Not sure if this is the way you are supposed to do it though.
    – BrunoLM
    Commented Jul 18, 2017 at 10:55
211

Angular 4 in combination with feature modules (if you are for instance using a shared-module) requires you to also export the ReactiveFormsModule to work.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { } 
0
187

Ok after some digging I found a solution for "Can't bind to 'formGroup' since it isn't a known property of 'form'."

For my case, I've been using multiple modules files, i added ReactiveFormsModule in app.module.ts

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

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

But this wasn't working when I use a [formGroup] directive from a component added in another module, e.g. using [formGroup] in author.component.ts which is subscribed in author.module.ts file:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

I thought if i added ReactiveFormsModule in app.module.ts, by default ReactiveFormsModule would be inherited by all its children modules like author.module in this case... (wrong!). I needed to import ReactiveFormsModule in author.module.ts in order to make all directives to work:

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

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

So, if you are using submodules, make sure to import ReactiveFormsModule in each submodule file.

2
  • 2
    Works for me, exactly the same problem, I really thought modules in exports array will be inherited by children modules... Don't know why exactly ! EDIT : documentation says exports is to make components, pipes, directives available in the TEMPLATE of any COMPONENT ()
    – guy777
    Commented Nov 22, 2018 at 21:24
  • This is the solution if you use lazy loading or work with multiple modules. Thanks. Commented Oct 3, 2020 at 18:18
70

I have encountered this error during unit testing of a component (only during testing, within application it worked normally). The solution is to import ReactiveFormsModule in .spec.ts file:

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});
0
37
  1. go to: app.module.ts
  2. imports:[ .... ReactiveFormsModule ]
  3. add this: import { ReactiveFormsModule } from '@angular/forms';
  4. it should look like that:

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

@NgModule({
  declarations: [
  
  ],
  imports: [
    
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

30

The suggested answer did not work for me with Angular 4. Instead I had to use another way of attribute binding with the attr prefix:

<element [attr.attribute-to-bind]="someValue">
5
  • 4
    Hey man! Are you sure your answer is related to the question? :) The question was about an issue setting up a form - cause by not properly setting up the ngModule Commented Apr 26, 2017 at 14:24
  • 1
    @johnnyfittizio Pretty sure. Same scenario, same error message.
    – str
    Commented Apr 26, 2017 at 14:47
  • 2
    This worked for me, but is strange - why do I need the attr. ? Commented Oct 26, 2017 at 21:17
  • Thanks a ton. This worked for me also, but I would think there must be something else triggering the problem, like library versioning, or <form> tag positioning? Strange.
    – Memetican
    Commented Mar 14, 2019 at 23:33
  • 1
    Found it- the problem was that I needed to import ReactiveFormsModule directly into my page's .module.ts. Not the .page.ts... once I did that, my template could correctly identify the formGroup attribute, without the attr. prefix.
    – Memetican
    Commented Mar 15, 2019 at 0:37
29

The error says that FormGroup is not recognized in this module. So you have to import these (below) modules in every module that uses FormGroup

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

Then add FormsModule and ReactiveFormsModule into your Module's imports array.

imports: [
  FormsModule,
  ReactiveFormsModule
],

You may be thinking that I have already added it in AppModule and it should inherit from it? But it is not. Because these modules are exporting required directives that are available only in importing modules. Read more in Sharing modules.

Other factors for these errors may be be a spelling error like below...

[FormGroup]="form" Capital F instead of small f

[formsGroup]="form" Extra s after form

1
  • 1
    Great answer! I was missing out on a vital import.
    – Joseph
    Commented Apr 21, 2021 at 19:16
21

Firstly, it is not related to Angular versions>2. Just import the following in your app.module.ts file will fix the problems.

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

Then add FormsModule and ReactiveFormsModule into your imports array.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Note: You can also import ReactiveFormsModule to a specific module instead to app.module.ts

1
  • Tried this in Angular 15 and still have the error. :( Commented May 5, 2023 at 21:36
20

If you have to import two modules then add like this below

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
1
  • Jeez Angular, despite using ng g c myComponent the component had not been added to the declarations section app.module.ts, after adding it the app compiles. How dumb is this? Commented Aug 9, 2022 at 10:01
17

Keep in mind that if you have defined "Feature Modules", you'll need to import in the Feature Module, even if you already imported to the AppModule. From the Angular documentation:

Modules don't inherit access to the components, directives, or pipes that are declared in other modules. What AppModule imports is irrelevant to ContactModule and vice versa. Before ContactComponent can bind with [(ngModel)], its ContactModule must import FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

2
  • 1
    thank you so much! I was working for hours on this issue, can't imagine what the problem was... Simply importing my feature Module to app Module fixed the issue.
    – keschra
    Commented Nov 24, 2020 at 10:44
  • This was my issue as well. Missed importing into a module. Thanks!! Commented May 5, 2023 at 21:44
14

I had the same issue with Angular 7. Just import following in your app.module.ts file.

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

Then add FormsModule and ReactiveFormsModule in to your imports array.

imports: [
  FormsModule,
  ReactiveFormsModule
],
0
12

This problem occurs due to missing import of FormsModule,ReactiveFormsModule .I also came with same problem. My case was diff. as i was working with modules.So i missed above imports in my parent modules though i had imported it into child modules,it wasn't working.

Then i imported it into my parent modules as below, and it worked!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })
12

Error ex:error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

I am giving possible reasons and solutions if the solution works/useful please upvote and make a comment which solution worked for you

Scenario 1 and suggestion: if you have only one module or the error appears in app component

You have to import the FormsModule, ReactiveFormsModule in the module

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

imports: [
  FormsModule,
  ReactiveFormsModule,
],

Scenario 2 and suggestion: when your application contains multiple modules

Import FormsModule and reactiveFormsModule in that particular module/submodule i.e. nearest module

Scenario 3 and suggestion: If you imported FormModule and ReactiveFormModule correctly there might be another problem.

Maybe you didn't add your component to module declarations in the app module. So add your component to module declarations.

import { YourComponentName } from './example-file-path/your-component-name.component';

@NgModule({
  declarations: [
    YourComponentName
  ]
})

Scenario 4 and suggestion: If you added ReactiveFormsModule and FormsModule as mentioned in the above.

Try to reload the project (restart the IDE) and start your server once again with ng serve

.

11
  1. Your Angular version is 11+, and you use VisualStudioCode?

  2. And you have already imported FormsModule, ReactiveFormsModule and added it into your imports-section within e.g. app.module.ts (relevant module can be different, choose the right one):

// app.module.ts (excerpt)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
  ...
  FormsModule,
  ReactiveFormsModule,
  ...
],
  1. You have the right imports (sometimes there are other libs with similar names); you have defined and initialized your form in your component?
// MyWonderfulComponent (excerpt)


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

export class MyWonderfulComponent implements OnInit {
  form: FormGroup; 
  ...
  constructor (private fb: FormBuilder) {
    this.form = this.fb.group({
      // DON'T FORGET THE FORM INITIALISATION
    });
  }
  1. Your Component-Template has your form:
<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- MY FORM CONTROLS ARE ALREADY HERE --> 
</form>
  1. And you still get the error message "...since it isn't a known property of..." ?

then just simple restart your VisualStudioCode :)

2
  • Note that you need to import FormsModule/ReactiveFormsModule in the module that the component is actually a part of. Blindly putting those in app.module.ts is not enough.
    – Tamius Han
    Commented Jul 8, 2021 at 13:23
  • 1
    This solution also worked for me in PhpStorm. After a restart it didn't give the warning anymore.
    – Wilco
    Commented Feb 17, 2022 at 14:11
9

Don't be a dumb dumb like me. I was getting the same error as above, and none of the options in previous answers worked. Then I realized I capitalized 'F' in FormGroup. Doh!

Instead of:

[FormGroup]="form"

Do:

[formGroup]="form"
0
9

Simple solution:

Step 1: Import ReactiveFormModule

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

Step 2: Add "ReactiveFormsModule" to the import section

imports: [

    ReactiveFormsModule
  ]

Step 3: Restart the application and done

Example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }
9

add "ReactiveFormsModule" in your <componenet.module.ts> parent

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

@NgModule({
   declarations: [
        .....
   ],
   imports: [
        .....
        FormsModule,
        ReactiveFormsModule

    ]
})
export class InvoiceModule { }
8

I was coming across this error when trying to do e2e testing and it was driving me crazy that there were no answers to this.

IF YOU ARE DOING TESTING, find your *.specs.ts file and add :

import {ReactiveFormsModule, FormsModule} from '@angular/forms';
1
  • refer this answer for more clarity how you will add that for unit testing: @xuhcc
    – Visrut
    Commented Mar 3, 2023 at 12:32
7

For people strolling these threads about this error. In my case I had a shared module where I only exported the FormsModule and ReactiveFormsModule and forgot to import it. This caused a strange error that formgroups were not working in sub components. Hope this helps people scratching their heads.

7

If you have this problem when you are developing a component, you should add these two modules to your closest module:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

And if you are developing a test for your components so you should add this module to your test file like this:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
6

A LITTLE NOTE: Be careful about loaders and minimize (Rails env.):

After seeing this error and trying every solution out there, i realised there was something wrong with my html loader.

I've set my Rails environment up to import HTML paths for my components successfully with this loader (config/loaders/html.js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

After some hours efforts and countless of ReactiveFormsModule imports i saw that my formGroup was small letters: formgroup.

This led me to the loader and the fact that it downcased my HTML on minimize.

After changing the options, everything worked as it should, and i could go back to crying again.

I know that this is not an answer to the question, but for future Rails visitors (and other with custom loaders) i think this could be helpfull.

1
  • Thanks for this, i finally had to use => minimize: {caseSensitive: true} to get it working Commented Jul 28, 2020 at 14:08
6

Import and register ReactiveFormsModule in your app.module.ts.

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Make sure your spelling is correct in both .ts and .html file. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

xxx.html file-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

I was by mistake wrote [FormGroup] insted of [formGroup]. Check your spelling correctly in .html. It doesn't throw compile time error If anything wrong in .html file.

0
6

I tried almost all the solution here but my problem was a little different(stupid). I added the component in routing module but didn't include it main module. So make sure your component is part of the module.

1
  • If your component is a child component, don't forget to add import { FormsModule, ReactiveFormsModule } from '@angular/forms'; to its respective module.
    – Bjorn Liza
    Commented Aug 25, 2021 at 14:52
6

Using and import REACTIVE_FORM_DIRECTIVES:

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 { }
1
  • 1
    Is "REACTIVE_FORM_DIRECTIVES" literal? Commented Oct 21, 2021 at 13:03
6

I had the same problem. Make sure that if using submodules (for example, you not only have app.component.module.ts), but you have a separate component such as login.module.ts, that you include ReactiveFormsModule import in this login.module.ts import, for it to work. I don't even have to import ReactiveFormsModule in my app.component.module, because I'm using submodules for everything.

File login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}
1
  • that was also a problem in my case. I had enter-credentials-modal-component and login-site-component. it did not work until I did import of FormsModule and ReactiveFormsModule for both of them
    – Jacob
    Commented Mar 22, 2021 at 22:55
6

The ReactiveFormsModule and FormsModule import should be added in your custom component module and also its parent component from where it is getting called.

For example, I needed to add form for my filter component. So I should add this import in my filter module and its parent page (might be list) module from where this filter button gets clicked.

5

Note: if you are working inside child module's component, then you just have to import ReactiveFormsModule in child module rather than parent app root module.

1
  • This was the magic sauce that was missing for me. Commented Apr 26, 2021 at 4:21
5

Import ReactiveFormsModule in the corresponding module.

5

If this is just a TypeScript error but everything on your form works, you may just have to restart your IDE.

5

in case you are using standalone components, import ReactiveFormsModule in the same component.ts file and in the @Component decorator, add a property called imports and give it an array containing the ReactiveFormsModule as an element. Like so:

import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-signin',
  standalone: true,
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css'],
  imports: [ReactiveFormsModule]
})
export class SigninComponent {
  signinForm = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  });
  
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.