Ionic form’s validation | Get started with Reactive Form

Intro

Validation can be a boring thing, but it’s required in other to get a good application. While creating applications, you will often need form validation. Most-likely the application you are currently developing got some kind of form, and it’s a place where users can really start to feel frustrated if not done correctly.
But don’t worry Angular got your back. With Reactive Form, validation becomes a piece of cake, and user experience is great.

Setting up your Ionic project:

In order to use ‘Reactive Forms’ you will need to add some import into your page’s module. To do so, add FormsModule and ReactiveFormsModule like this:

Adding validation

Now that it’s setup, you can use the [formGroup] directive attribute on form element like this:

It tells that your form will be using formGroup variable as a form validator. To declare this validator go into your page component ts file and declare fromGroup:

Before setting up validation let’s add some fields to the form:

Personally, I really like having ion-label placed just above the field (position stacked). It may seems redundant with the placeholder al-ready describing the field, but the placeholder won't be displayed once user starts typing into the field. Any way, as you can see each field got a formControlName attribute. This is how `formGroup will be able to link validation's rules to a specifics fields.

By now you should read some complaint in your console like:

What’s this ? formGroup works with a FromGroup instance. Meaning that you have to add this into your page ts file:

Validation rules

Then console is casually yelling at you something like:

To solve this you need to add the specific validation’s rules I was talking about:

Phew! Now your form should be displayed and the console be clear of any error message…

But… Your form is accepting ANYTHING! Let’s improve that:

Finally, your form only accepts:

  • username with 4 character minimum, 30 maximum and using alphanumeric characters
  • email kind of valid (there is better regex out there, but at least we are not accepting special characters)
  • a password with a minimum length of 8 characters using alphanumerical plus some special characters

That’s it! Well… No! It’s missing something important…

Submitting the form

Let’s create button to submit the form. And add that at the end of the form:

I also love having ion-icon inside “action button”. They give life to it. Here the save button will only be clickable once your form is valid. This is done by using [disabled] attribute ([disabled]="!formGroup.valid")

Now that you got a button that submit the form, better handle that submit action! Modify your form like this:

And add the following in you page ts file:

If you submit your form you, should see something like the following in your console:

Conclusion

Obviously, there is more to it. Better validator (especially for email). But as you have seen, it’s pretty easy to get working validation with reactive form

All the code in this example is available at this github depot. Feel free to clone it.
Well, I hope you enjoyed this article. If you would like to hear more about this topic… feel free to give it a clap!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
lsmod

lsmod

Self-taught programmer; passionate about Rust & Blockchains