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

Question

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'

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

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.

Answer 2

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