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

Question

The situation that I am in is that I have been trying to make what should be a very simple form in my Angular application, but no matter what, it never works. I am using the Angular 2.0.0 RC5 version and yet, I keep getting the following ERROR shared in the image:- 

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

The code which I have used is shared below:-

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

Below is my ngModule which is shared:-

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

My question is why am I getting that error? Is it because I am missing something?

Answer 1

In order to rectify this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Have shared an 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 elaborate more, formGroup is a selector for directive named FormGroupDirective that is a part of ReactiveFormsModule and hence the need to import it. It is used to bind an existing FormGroup to a DOM element which is the RC5 FIX. 

You will also need to import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms' in your controller and add it to directives in @Component. This should help you rectify your problem and once done, you will probably get another ERROR because you didn't add formControlName="name" to your input in form. Please do the needful and your ERROR will be solved.