Ionic 4 Form Validation?


#1

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


#2

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.


#3

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


#4

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!


#5

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


#6

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",


#7

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.


#8

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!


#9

Maybe you just try to no submit form…

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


#10

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


#11

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”


#12

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.


#13

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.


#14

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

imports: [

FormsModule,
ReactiveFormsModule

]

In your .module.ts ?