Can't bind to 'formGroup' since it isn't a known property of 'form'. error in ionic v5.2.2

Question

I have following ionic component which includes a form but every time i access the page web console returns following error.

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

<ion-content padding>
 <form [ERROR ->][(formGroup)]="passengregForm">

    <ion-item>
"): ng:///RegisterPageModule/RegisterPage.html@10:7
No provider for ControlContainer ("

<ion-content padding>
 [ERROR ->]<form [(formGroup)]="passengregForm">

    <ion-item>
"): ng:///RegisterPageModule/RegisterPage.html@10:1
No provider for NgControl ("
    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      [ERROR ->]<ion-input type="text" formControlName="fullname"></ion-input>
    </ion-item>
    <ion-button expand"): ng:///RegisterPageModule/RegisterPage.html@14:6

and register.module.ts,

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

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

  driverregForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.driverregForm = this.formBuilder.group({
      fullname: ['', Validators.required],
      nic: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('alert !');
  }

}

and register.page.html,

<ion-content padding>
 <form [(formGroup)]="passengregForm">

    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      <ion-input type="text" formControlName="fullname"></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="!credentialsForm.valid">Login</ion-button>

  </form> 
</ion-content>

cannot find any error on command prompt which runs the app, I've already gone through this but it wasn't solve the problem.

app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
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';

import { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder } from '@ionic-native/native-geocoder/ngx';

import { SQLitePorter } from '@ionic-native/sqlite-porter/ngx';
import { SQLite } from '@ionic-native/sqlite/ngx';

import { HttpClientModule } from '@angular/common/http';
import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';
import { Storage, IonicStorageModule } from '@ionic/storage';

import { Camera } from '@ionic-native/Camera/ngx';
import { File } from '@ionic-native/File/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

import { RegisterPageModule } from './public/register/register.module';

export function jwtOptionFactory(storage) {
  return {
    tokenGetter: () => {
      return storage.get('access_token');
    },
    whitelistedDomains: ['localhost:5000']
  }
}


@NgModule({
  declarations: [AppComponent,RegisterPageModule],
  entryComponents: [],
  imports: [
    FormsModule,
    ReactiveFormsModule,
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    IonicStorageModule.forRoot(),
    JwtModule.forRoot({
      jwtOptionsProvider: {
        provide: JWT_OPTIONS,
        useFactory: jwtOptionFactory,
        deps: [Storage],
      }
    })
   ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    NativeGeocoder,
    { provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    },
    SQLite,
    SQLitePorter,
    Camera,
    File,
    WebView,
    FilePath
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ionic version is 5.2.2

Thanks in advance.

Answer 1

Try to declare it as follow:

Html

<ion-content padding>
 <form [formGroup]="passengregForm">

    <ion-item>
      <ion-label position="floating">Full Name</ion-label>
      <ion-input type="text" formControlName="fullname"></ion-input>
    </ion-item>
    <ion-button expand="full" type="submit" [disabled]="!passengregForm.valid">Login</ion-button>

  </form> 
</ion-content>

Your ts file

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

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

 @Input() passengregForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.passengregForm= this.formBuilder.group({
      fullname: ['', Validators.required],
      nic: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('alert !');
  }

}

Answer 2

It looks like you need to use the correct FormGroup. You don't have passengregForm in your component, but you do have a driverregForm. Try doing a

[formGroup]="driverregForm" instead (also remove the parentheses)

Answer 3

As pointed out by @Adrita, you need to import the FormsModule and ReactiveFormsModule in app.module.ts

And if that doesn't work, it might be because your module is lazy loaded. In that case import it in the lazy loaded module. In your case it is register.module.ts

And one more thing it is [formGroup] not [(formGroup)]

Answer 4

You need to import ReactiveFormsModule in app.module.ts

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

@NgModule({
    imports: [
        FormsModule,
        ReactiveFormsModule,
        ...
    ],
    declarations: [
        ...
    ],
    bootstrap: [AppComponent]
})