Ionic v4 migration issue

Ionic Framework
1

When migrating my app to Ionic-V4 I get this error on all my pages that have forms

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

I think it might because we are moving to a new version of angular, but it is unclear to me, what steps I have to take to do the upgrade.

Typical error is

image
image725×212 7.79 KB

but FormsModule is included in the module.ts for the page

3 Likes
2

@developergeme Try to include ReactiveFormsModule in the module.

6 Likes
3

Great, that worked. I did see the stackoverflow article, but kind of ignored it as it was pure angular. but adding

import { ReactiveFormsModule} from ‘@angular/forms’;

and

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

in module.ts for the page solved my problem

4

Still not fixed for me

5

If you are lazy loading (which is the default if you use the basic ionic 4 templates e.g. side menu or tabs) then you have to do this to the page module as well as the app.module.ts.

I’m still new to this so I’m not sure why yet but this fixed it for me.

5 Likes
6

Thank you. Fixed for me.

7

Doesn’t fix it for me.

My app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { IonicStorageModule } from '@ionic/storage';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule} from '@angular/forms';


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

my login.html

<ion-content no-padding>
    <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>
        <ion-item class="formItem">
          <ion-input #email formControlName="email" type="email" aria-labelledby="lbl-email" placeholder="Your email address"
            [class.invalid]="!loginForm.controls.email.valid"></ion-input>
        </ion-item>
        <ion-item class="formItem">
          <ion-input #password formControlName="password" type="password" aria-labelledby="lbl-password" placeholder="Your password"
            [class.invalid]="!loginForm.controls.password.valid"></ion-input>
        </ion-item>
      <ion-button fill="clear" class="formSubmitButton" type="submit">Login</ion-button>
    </form>

</ion-content>

my login.page.ts

import { EmailValidator } from './../validators/email';
import { Component, OnInit } from '@angular/core';
import { LoadingController, AlertController } from '@ionic/angular';
import { FormGroup, FormArray, FormBuilder, Validators,ReactiveFormsModule } from '@angular/forms';
import { Router } from '@angular/router';

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

I also tried to add ReactiveFormsModule import to my login.module.ts but doesn’t work…

Don’t understand…

8

Same here. did you got any solution

9

Yes, see my other answer here https://forum.ionicframework.com/t/ionic-4-form-validation/134058/18

10

Thank you. It’s work for me only add in page.module.ts in tabs templates :slight_smile:

1 Like