Can't bind to 'formGroup' since it isn

Question

THE SITUATION:

Please help! I am trying to make what should be a very simple form in my Angular2 app but no matter what it never works.

ANGULAR VERSION:

Angular 2.0.0 Rc5

THE ERROR:

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

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?

Answer 1

If you have two module then add like this

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]
})

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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]
    })

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