• Register
1 vote
154 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

Please log in or register to answer this question.

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 2
3,890 points

Related questions

0 votes
1 answer 1.9K views
1.9K 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, 2020 mphil 2.3k points
0 votes
1 answer 82 views
82 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, 2020 mphil 2.3k points
0 votes
1 answer 3.4K views
3.4K 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, 2020 Raphael Pacheco 4.9k points
1 vote
1 answer 447 views
447 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, 2020 stewart 4k points
0 votes
1 answer 62 views
62 views
Problem error: formgroup expects a formgroup instance. please pass one in.
asked Feb 9 charles mathews 3.8k points
0 votes
0 answers 5 views
5 views
Problem: I have the following error when starting my angular application, even if the component is not showing. I have to comment on the way my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it ... /details/intervention.details.css'] }) export class InterventionDetails { @Input() intervention: Intervention; public test : string = "toto"; }
asked 3 days ago sasha 13.2k points
0 votes
1 answer 144 views
144 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, 2020 Raphael Pacheco 4.9k points
0 votes
1 answer 3.7K views
3.7K views
Problem: I am currently wondering why I am getting below compile error if I just declare variable with var or let keywords? I want to say, below code goes well: export class MyAppComponent { myRefreshClickStream$: any; constructor(){ } } While this brings the error: export class MyAppComponent { var myRefreshClickStream$: any; constructor(){ } }
asked Jan 27, 2020 jwilliam 3.9k points
1 vote
2 answers 5K views
5K views
Problem : I have recently started learning Angular2. I am trying to create the component but I am facing below error. &ldquo;Is an angular component, then verify that it is part of this module.&rdquo; KIndly find below my code for your reference. import { Component } from ' ... : ` <p>This is my Hello World article</p> ` }) export class MyHelloComponent { } Kindly help me in fixing above error.
asked Mar 30, 2020 morrisBson 3.2k points
0 votes
1 answer 138 views
138 views
Problem: I am getting following message when i run angualr2 program with typescript. angular is running in the development mode. call enableprodmode() to enable the production mode. What is the reason for this message is it a deployment option? Curious for feedback ?
asked Jul 16, 2020 quizzBabes 160 points