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.

Also If you are using `lazy-loading` then you have to import `FormsModule` in `RegisterPageModule` instead of `AppModule`. — hrdkisback, Jul 17 '19 at 10:25

score 2 · Answer 1 · answered Jul 17 '19 at 10:23

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)

answered Jul 17 '19 at 10:23

John

10,165
5
55
71

Also remember to add the `FormsModule ` and `ReactiveFormsModule` module to `register.module.ts`. – John Jul 17 '19 at 10:34
after that it gives me this `TypeError: Cannot create property 'validator' on string 'driverregForm' TypeError: Cannot create property 'validator' on string 'driverregForm' ` on web console ! – pl-jay Jul 17 '19 at 10:49
`Cannot read property 'valid' of undefined` error on `` line – pl-jay Jul 17 '19 at 11:09
`formControlName` instead of `(formControlName)`. Using `()` means that you want to use it as an @Output() or event emitter. Without the parentheses, you can use a string as the attribute value, and since `fullname` is a child control, using the name works. – John Jul 17 '19 at 11:10
`TypeError: this.form.get is not a function` error on `Full Name` – pl-jay Jul 17 '19 at 11:20
i also have login component with forms but it works well, once i try to add forms other components it ended up with errors. – pl-jay Jul 17 '19 at 11:21

Adrita Sharma · Answer 2 · 2019-07-17T10:15:49.883

1

You need to import ReactiveFormsModule in app.module.ts

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

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

edited Jul 17 '19 at 10:15

answered Jul 17 '19 at 10:15

Adrita Sharma

21,581
10
69
79

in ` app.module.ts` ? – pl-jay Jul 17 '19 at 10:15
like i said i 've followed one answer and did the same but no effect at all. – pl-jay Jul 17 '19 at 10:17
Is `RegisterPage` component declared in app.module or any other module – Adrita Sharma Jul 17 '19 at 10:21
In which module it is declared? – Adrita Sharma Jul 17 '19 at 10:23
none does it need to declared anywhere, it just used inside routing module only – pl-jay Jul 17 '19 at 10:26
Yes. Atleast declare in in app.module – Adrita Sharma Jul 17 '19 at 10:32
once it declared in app.module, `Unexpected directive 'RegisterPage' imported by the module 'AppModule'. Please add a @NgModule annotation` – pl-jay Jul 17 '19 at 10:42
You need to declare, not import. Add it in `declarations: []` – Adrita Sharma Jul 17 '19 at 10:45

A. Kriel · Accepted Answer · 2019-07-17T11:00:15.267

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 !');
  }

}

edited Jul 17 '19 at 11:00

answered Jul 17 '19 at 10:23

A. Kriel

260
4
20

now `No provider for ControlContainer ("` error comes up in web console – pl-jay Jul 17 '19 at 10:35
@ Pathum Lakshan -- Can you check if ReactiveFormsModule and FormsModule is imported in your app.module.ts and not just the ReactiveFormsModule – A. Kriel Jul 17 '19 at 10:51
both are imported for sure – pl-jay Jul 17 '19 at 10:52
@ Pathum Lakshan --- i edited my answer just see above, i forgot o rename the other variables to the name of your form in the ts and html file, sorry my bad hope it solves the problem. – A. Kriel Jul 17 '19 at 11:01
1

`[disabled]="!passengregForm.valid" ` it causes the error :-) – pl-jay Jul 17 '19 at 12:04

score 0 · Answer 4 · answered Jul 17 '19 at 10:22

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)]

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

4 Answers4