• Register
1 vote
84 views

Problem :

I am beginner to Angular2. Currently I am trying to create a simple form in the Angular2 app but it is not working for me. I am facing below error.

Can't bind to 'formGroup' since it isn't a known property of 'form'.
I am struggling on this error from couple of days. Still I don’t know how to fix above error. Is it possible for somebody to fix it for me?
 
8 5 2
3,230 points

2 Answers

0 votes

Solution :

I had faced this error before so I can help you in fixing it.

The formGroup is the selector used for the directive named FormGroupDirective which is the part of ReactiveFormsModule So you need to import it and it is used to bind the existing FormGroup to the DOM element. 

Please find below the fix for RC5.

To fix above error you just need to first import the REACTIVE_FORM_DIRECTIVES from the '@angular/forms' in your controller and after that you need also to add it to your directives in your @Component. That will certainly fix your problem.

After you fixing your problem you will almost certainly get another error as you did not add the formControlName="name" to the input in the form.

I hope my above solution helped you in fixing your error related to Angular2.

8 4
5,680 points
0 votes

The error says that the FormGroup is not recognized in this module.

Solution:

To solve this error you have to import these modules in every module that uses the FormGroup.

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

After that add FormModule and ReactiveFormsModule into your Module’s import array.

imports: [

  FormsModule,

  ReactiveFormsModule

],

Sometimes the user thinks that they have added already it in the AppModule and it should inherit from it. But it is not because these modules are exporting the required directives that are only available in importing modules.

Error Factors:

On factor for these errors may be spell error like below;

[Formgroup]=” form” Capital F instead of small f.

[formsGroup] = “form” extra s after form.

Another solution:

Some times this occurs due to the missing import of FormModule, ReactiveFormsModule. For this purpose you have to import it into my parent modules as below;

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

I hope this will help to solve your problem.

11 5 1
3,890 points

Related questions

0 votes
1 answer 1.1K views
1.1K views
Problem : I am beginner in using Angular material. I am trying to use autocomplete component in the Angular2 project. Please find below the code written for my component. import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; ... ; I am struggling with this issue from past 2 days but unable to resolve it. Can somebody help me in fixing this issue?
asked Feb 27 mphil 2.3k points
0 votes
1 answer 45 views
45 views
Problem : I am facing below error when trying to launch my Angular app, even if my component is not displayed at all. “Can't bind to 'ngmodel' since it isn't a known property of 'input'. ("” How can I fix this issue?
asked Feb 19 mphil 2.3k points
0 votes
1 answer 359 views
359 views
Problem: I am beginner to Angular. I have recently started working in Angular project but I am facing below bizarre error: &ldquo;Can't bind to 'ngIf' since it isn't a known property of 'div'.&rdquo; The element is I guess <div [ngIf]="isAuth" id="sidebar ... is the child component. In my parent component i.e. App component the ngif works properly. Please Note: I am currently using Angular RC5.
asked Aug 17 Raphael Pacheco 4.9k points
1 vote
1 answer 62 views
62 views
Problem : I am very new to Angular2. Currently I am trying to create the component after that it is set to the root component but still I am facing below error: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'. I ... days on researching and trying to fix above error but unable to fix it so now I need Angular2 experts advice to quick fix my Angular2 error.
asked May 2 stewart 4k points
0 votes
1 answer 24 views
24 views
Problem: I am naive to Angular, Webpack, Bootstrap and typescript. I have tried to write a service but it is throwing the below error while my app is bootstrapping. I am currently using ng2 2.4.2 and the angular-cli 1.0.0-beta.24. My TypeError as below: &ldquo;Uncaught typeerror: ... .navigate(['/project', query]); } public extractData(res: Response) { let body = res.json(); return body || {}; } }
asked Sep 3 Raphael Pacheco 4.9k points