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

Question

I am new in using Angular 4. I am trying to practice model driven forms in angular 4, But it keep getting this error.

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@71:38 Error: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)">

I tried searching it for the issue on how to solve. Mostly the solution is by importing ReactiveFormsModule in the module. Here is the code in my component.ts

import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

import { HttpClient, HttpErrorResponse } from '@angular/common/http';                                                                                                                                                           


@Component({
  templateUrl: 'ads.component.html'
})
export class AdsComponent {
    form;
    ngOnInit() {
        this.form = new FormGroup({
            ads_name: new FormControl("Hello Ads!")
        });
    } 

  constructor(
    private http: HttpClient
    ) {

   }

   onSubmit = function(user) {
        console.log(user);
   }

}

and here is the code in my component.html

<form class="form-horizontal" [formGroup] = "form" (ngSubmit)="onSubmit(form.value)">
   <div class="form-group row">
       <label class="col-md-3 form-control-label" for="ads_name">Ads Name</label>
       <div class="col-md-9">
           <input type="text" id="ads_name" name="ads_name" class="form-control" placeholder="Ads Name" formControlName="ads_name" ngModel>
       </div>
   </div>
</form>

and here is the code in my module

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

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule
  ],

I have a seperated component module inside my components folder seperated in the app inside of my views folder — Jaaayz, Sep 15 '17 at 05:43

score 13 · Accepted Answer · answered Sep 15 '17 at 04:22

13

As your error states:

Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'. (" ][formGroup] = "form" (ngSubmit)="onSubmit(form.value)"> "): ng:///ComponentsModule/AdsComponent.html@

we can assume that your AdsComponent is a part of ComponentsModule declaration but you have imported ReactiveFormsModule in AppModule. So in order angular will be able to compile template of AdsComponent you should:

1) either import ReactiveFormsModule in ComponentsModule:

@NgModule({
  imports: [
    ...
    ReactiveFormsModule
  ]
})
export class ComponentsModule {}

2) or import module that is exporting ReactiveFormModule

@NgModule({
  exports: [
    ...
    ReactiveFormsModule
  ]
})
export class SharedModule {}

@NgModule({
  imports: [
    ...
    SharedModule
  ]
})
export class ComponentsModule {}

See also:

Angular 2 Use component from another module

answered Sep 15 '17 at 04:22

yurzui

205,937
32
433
399

It solved the error. But theres another error. Here is the error No provider for ControlContainer. But I'll try to look at link you gave – Jaaayz Sep 15 '17 at 05:16
This error is not related with that answer. You're doing something wrong in your template – yurzui Sep 15 '17 at 05:19
can we have a conversation in the chatroom? If you're available sorry for bothering. – Jaaayz Sep 15 '17 at 05:24
Try copying this code https://plnkr.co/edit/AKwwpmYp7liF6ADhBjpB?p=preview – yurzui Sep 15 '17 at 05:27
I tried it already. Btw in my views folder I have a seperated components folder and in that folder I had each components with each controller and I had the components.module wher I placed to export the reactive forms module and import it using the sharedmodule that you gave above. Now I got this error. ERROR Error: Uncaught (in promise): Error: Unexpected value 'FormGroup' declared by the module 'ComponentsModule'. Please add a @Pipe/@Directive/@Component annotation. sorry for this – Jaaayz Sep 15 '17 at 05:39
You should not add `FormGroup` to `declarations` array. Do you have github repo to reproduce it? – yurzui Sep 15 '17 at 05:43
I think the error that I have now is a known issue in angular I am trying to search it of any solutions it said that is is more of a template error. This is the error No provider for ControlContainer – Jaaayz Sep 15 '17 at 06:12
It's easy to reproduce. Check out console https://plnkr.co/edit/MtcCBlm0FZQ28qEv7lvp?p=preview I just removed `formGroup` from template and now `formControlName` directive can't find parent container https://github.com/angular/angular/blob/4.4.x/packages/forms/src/directives/reactive_directives/form_control_name.ts#L97 – yurzui Sep 15 '17 at 06:17
I figure it out I just put formGroup to the form of my other components and it solve the problem. Btw the links you gave and your answer helped me alot! Appreciated it! – Jaaayz Sep 15 '17 at 06:36

score 1 · Answer 2 · answered Mar 08 '18 at 17:41

1

Please declare the ReactiveFormsModule as part of your testing module.

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [ReactiveFormsModule],
        declarations: [YourComponent, ...],
        providers: [...]
    });
});

answered Mar 08 '18 at 17:41

Narayanan Panneerselvam

9
1

score 0 · Answer 3 · answered Oct 29 '18 at 21:52

0

There are obviously multiple solutions. This worked for me. Import the ReactiveFormsModule in app.module.ts

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

answered Oct 29 '18 at 21:52

James Poulose

3,569
2
34
39

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

3 Answers3