Can't bind to 'formGroup' since it isn't a known property of 'form' with a component inside a page

Question

I'm creating an app using Ionic and I've created a page survey which is SurveyPage. Inside of this page, I've got some texts and a component which is <app-survey-view> which is SurveyViewComponent

Inside SurveyViewComponent, I set a form and I have this error on [formGroup]="surveyForm" inside my HTML :

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

My property surveyForm has been well set and it should be working.

I tried to import ReactiveFormsModule inside my app.module.ts but it isn't working.

Even inside my SurveyPageModule I tried to import and export the ReactiveFormsModule but nothing changed.

Can someone help me fixing this ?

Thanks

EDIT : After some research, it seems like my page which has a module.ts doesn't let its child inherit the ReactiveFormsModule. I mean, survey-view, can't access ReactiveFormsModule which has been declared in its parent's module (SurveyPage)

Possible duplicate of [Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?](https://stackoverflow.com/questions/50964204/angular-6-cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form) — Prashant Pimpale, Jul 12 '19 at 09:50
@PrashantPimpale already tried, this didn't work for my case — , Jul 12 '19 at 09:51
Is it possible to provide StackBlitz example with your code? — Prashant Pimpale, Jul 12 '19 at 09:52
@PrashantPimpale just uploaded asked code files here : https://stackblitz.com/edit/ionic-lxsrn1 - First time I use this — , Jul 12 '19 at 10:03
@Kamil, Did you import ```FormsModule``` in imports array at app.module.ts?? As per your stackblitz you have not did that.. — Maniraj Murugan, Jul 12 '19 at 10:08

Bren Gunning · Answer 1 · 2019-07-12T11:30:11.050

0

Add FormsModule and ReactiveFormsModule into the imports section of the module you are in (or app.module.ts if you are not in a specific module). To import these come from

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

If you put it in a sub-module, you should not also reference the ReactiveFormsModule in a parent module that imports the module you are in.

I have created a working example for you on StackBlitz based on your StackBlitz example.

edited Jul 12 '19 at 11:30

answered Jul 12 '19 at 10:43

Bren Gunning

153
2
9

I just did but it's still not working. Added both modules into survey.module.ts but I'm still having this error – Jul 12 '19 at 11:57
And you removed the Forms modules (both) from the `app.module.ts`? I noticed you had that in the two places, on your StackBlitz. – Bren Gunning Jul 12 '19 at 12:54

MohammedAli · Answer 2 · 2019-07-12T12:10:11.867

surveypage.module.ts.module.ts

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

    @NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [ForgotpassPage]
})

surveypage.html

    <form [formGroup]="forgot_form" autocomplete="off">
    <ion-item lines="none" class="input-container">
    <ion-label position="floating" class="input-label">
      Email address
    </ion-label>
    <ion-input type="email" formControlName="email" class="input-box"></ion-input>
  </ion-item></form>

surveypage.ts

    forgot_form: FormGroup;
    constructor(private formBuilder: FormBuilder){}

this form is working but my case is that my form is in an external component which has no modules. I just tried your code inside my page, I had not this error anymore. But this code inside the component which is in my page shows the error I wrote in the title — , Jul 12 '19 at 12:17

Can't bind to 'formGroup' since it isn't a known property of 'form' with a component inside a page

2 Answers2