Can't bind to 'formGroup' since it isn't known property of 'form' - Angular 8 Ionic 4

Question

I can't use the Reactive Forms inside my Angular 8 / Ionic 4 App. Everytime I got this Error:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Template     parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'.

I try a few solutions from stack, but without a solution for me. Here is the Code I use:

My app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [], 
  imports: [
    BrowserModule,
    FormsModule, ReactiveFormsModule, // Forms
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}'

The Page HTML

<form [formGroup]="addGame" (ngSubmit)="onSubmit()">
    <ion-item>
        <ion-label>Name</ion-label>
        <ion-input id="name" type="text" formControlName="name"></ion-input>
    </ion-item> 

    <ion-item>
        <ion-label>Title</ion-label>
        <ion-input id="title" type="text" formControlName="title"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Url</ion-label>
        <ion-input id="url" type="text" formControlName="url"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Game ID (Intern)</ion-label>
        <ion-input id="gameid" type="text" formControlName="gameid"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>Image</ion-label>
        <ion-input id="image" type="text" formControlName="image"></ion-input>
    </ion-item>
</form>

The Page.ts

import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';

    import { Router } from '@angular/router';

    import { GamesService } from '../../services/games/games.service';


    @Component({
    selector: 'app-add-game',
    templateUrl: './add-game.page.html',
    styleUrls: ['./add-game.page.scss'],
    })
    export class AddGamePage implements OnInit {

    addGame: FormGroup;

    constructor(
        private games: GamesService,
        private route: Router,
        formBuilder: FormBuilder
    ){
        this.addGame = formBuilder.group({
            name: [''],
            title: [''],
            url: [''],
            gameid: [''],
            image: ['']
        });
    }

    ngOnInit() {
        // ToDo : Add Vendor to form
        console.log('add new game');
    }

    onSubmit(customerData) {
        console.log(customerData);
    }

    }

I try this one: Can't bind to 'formGroup' since it isn't a known property of 'form' but still the same error.

What I do wrong?

Thanks in advance.

you need import the ReactiveFormsModule in the module.ts where you declare the AddGamePage too, not only in app.module. https://angular.io/guide/sharing-ngmodules#sharing-modules — Eliseo, Aug 31 '19 at 09:04
I try it with follow code: import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; But the same error — angUHLALA, Aug 31 '19 at 09:25
I want to say. If your component AddGamePage are declared in a module, you need import ReactiveFormsModule in the **module** where you declared the component, not in app.module -in your app.module, your'e not declared (in the tag declare:[...] ) this component- I supouse you're declaring the component in another **module**. Is in this **module** where you need import ReactiveFormsModule (not in component). Really it's not necesary in AppModule — Eliseo, Aug 31 '19 at 09:47
Tested the code on stackblitz and working fine, see link and answer below. Assume it's just an import issue as mentioned by @eliseo — chrismclarke, Aug 31 '19 at 11:19

chrismclarke · Answer 1 · 2019-08-31T11:19:12.193

There isn't anything wrong with your code, I created a stackblitz using it and all is working fine https://stackblitz.com/edit/angular-rvpfj1

I'm assuming that means the issue is that you are lazy-loading your page and have not included the form modules in your page module.

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

@NgModule({
  imports: [
    // other imports ...
    FormsModule, ReactiveFormsModule,
  ],
})
export class PageModule { }

score 0 · Answer 2 · answered Aug 31 '19 at 08:19

0

Do not construct your form in your component constructor (and generally speaking, leave constructor alone, except for injection). ngOnInit is where you should instanciate your form for your component

answered Aug 31 '19 at 08:19

aherve

3,795
6
28
41

Still the same error when I put the FormBuilder.group into NgInit – angUHLALA Aug 31 '19 at 08:26
There's no reason to wait for the component initialization to construct the form. It's perfectly fine to do it in the constructor (or, more commonly, as an initializer class property). – Lazar Ljubenović Aug 31 '19 at 08:38

Can't bind to 'formGroup' since it isn't known property of 'form' - Angular 8 Ionic 4

My app.module

The Page HTML

The Page.ts

2 Answers2