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

0 votes

image

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?

Feb 10 in Others by Soham
• 8,730 points
116 views

1 answer to this question.

0 votes

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.

answered Feb 10 by Rahul
• 8,980 points

Related Questions In Others

0 votes
1 answer

How to take a screenshot of a current Activity and then share it?

For me, I captured and then shared ...READ MORE

answered Feb 8 in Others by Soham
• 8,730 points
12 views
0 votes
1 answer
0 votes
1 answer

What is a name function in JavaScript & how to define it?

A named function declares a name as ...READ MORE

answered Mar 7, 2019 in Others by Frankie
• 9,830 points
698 views
0 votes
0 answers

how to list the contents of a asset into an event

May 29, 2019 in Others by anonymous
174 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
447 views
0 votes
1 answer

How to set meta tags using Angular universal SSR and ngx-seo plug-in?

first Install the plug-in with npm i ngx-seo ...READ MORE

answered Feb 11 in Others by narikkadan
• 7,860 points
313 views
0 votes
1 answer

angular-6-seo-routing Issue

angular websites are not crawled by google ...READ MORE

answered Feb 22 in Others by narikkadan
• 7,860 points
41 views
0 votes
1 answer

It shows black screen when trying to load Map on device with ionic 2 Google Map Native plugin

In order to answer your question, start ...READ MORE

answered Feb 8 in Others by Rahul
• 8,980 points
85 views
0 votes
1 answer

Where do I find a list of all mat-icons -- Angular

To answer your question, the prior Material.io ...READ MORE

answered Feb 10 in Others by Rahul
• 8,980 points
56 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP