Ionic 4 Form Validation?

Hi,

Does anyone have an example of using Form Validation with Ionic 4?

I’m using the Angular 6 ReactiveFormsModule but the styling doesn’t look good with Ionic 4.

Many Thanks

Hi,
Were you able to add a form/form control using Reactive forms? I get the following error when I do so:

ng: No provider for NgControl

Any suggestions on how to work with Reactive Forms in Ionic 4?

Thanks in advance.

You need to add the ReactiveFormsModule to the page module where you are using reactive forms - FormsModule is included by default so you can just change that to ReactiveFormsModule (unless you also intend to use ngModel).

8 Likes

WOW! That was right on, Josh! Thanks a million!!! Can’t thank you enough for this! Can’t believe I wasted about 1 week on this!!!

Importing ReactiveFormsModule in the home.module.ts worked as I was using the form in home.page.ts and home.page.html.

NEW ISSUE FOUND:
I am now found a new issue. Using (ngSubmit)="submit()" on a form and using <ion-button type="submit">Submit</ion-button> reloads the whole page! By any chance, do you have any idea how to fix this?

Another user also posted a similar issue and I was trying to help him with it. Here is the link:

Thanks very much!

2 Likes

As far as I’m aware this was an issue with the fact that Ionic components use Shadow DOM now, but I think it’s already been fixed in alpha.11

1 Like

It’s weird! I just tried this in my project that uses alpha 11 and the issue still persists. Here’s extract from my package.json for confirmation:
"@ionic/angular": "4.0.0-alpha.11",

Try (submit) instead of (ngSubmit) - I haven’t actually tried myself yet so I’m not 100% sure that whatever issues were there are fixed or not. If it doesn’t work you could just work around it by having a button with a standard click event binding that calls your function rather than hooking into submit.

Just tried (submit) and sadly, that does not work either.
<form [formGroup]="form" (submit)="submit(form.value)">

Maybe, the team is still working on it. Your suggested workaround is what I had in mind and I am going to use it to move forward :slight_smile:

Thank you, Josh! You are amazing!

Maybe you just try to no submit form…

<form [formGroup]="form">
...
<button type="button" (click)="submit()" [disabled]=!form.valid">SUBMIT</button>
</form>

I created a To Do List App in Ionic 4 that you can download for free so you can see how to start using Ionic 4 to create a simple app with lists, forms and navigation. You can download it from https://ionicthemes.com/tutorials/about/ionic-4-vs-ionic-3

1 Like

I had the same issue and had to keep going back to alpha 7. But mine started working with this version: “@ionic/angular”: “4.0.0-beta.1”

You can use (ngSubmit)="submit($event)" then in your submit function do this:

submit(event: any) {
    event.preventDefault();
    // TODO get form group value & handle submission
}

This will stop the page from reloading.

I have imported ReactiveFormsModule in my app.module.ts and page.module.ts and I still get the “Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’.” I have tried importing just in app, just in page and in both. Nothing I do seems to make this error go away. I am also seeing the ‘No provider for ControlContainer’ and ‘No provider for NgControl’ errors as well. Any help on this would be greatly appreciated.

Hi, are you importing both:
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

imports: [

FormsModule,
ReactiveFormsModule

]

In your .module.ts ?

Same here…
@mytzui, yes i imported both FormsModule and ReactiveFormsModule (ionic 4.10.2)

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 {}

hello,
module file looks good. Post html and ts.

Best regards, anna-liebt

@gsoulie seems you have added ReactiveFormsModule in your app.module.ts, but have you tried to add it to your page-name.module.ts ?


...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}
3 Likes

Yes that’s it ! i had imported it in my page.module.ts file but forgot to add it into imports: array !! Thanks a lot

1 Like

Hi, maybe it’s too late but I think this Ionic tutorial about Forms and Validations in Ionic 4 will help you. It includes an example app that shows how to use and validate different types of inputs in Ionic 4 using Reactive Forms.

Muchs gracias por tu respuesta, me sirvio de mucho.