Skip to content

New Changes Ionic 2 Forms with Examples

Posted in Javascript

Preamble: You used Ionic 2 Forms about 3 months ago, probably. All worked nicely. You spinned up a new project today, and everything you write is breaking and causing error with regards to forms. You’re not alone. Welcome. This is for you. A new look at Ionic 2 Forms with examples.

This article considers these:

  • Template-driven forms (I call it Implicit form creation)
  • Using FormBuilder
  • Using FormBuilder with Validators

Ionic 2 Forms are Angular Forms. And Angular 2 Forms are in recent months under constant development and iteration, to the extent of many breaking changes. Although my previous blog post worked for some months, I started getting emails of the project breaking under new changes.

I am happy to update the project to the new way of in Ionic 2 Forms, and I do a bit of explanation in this.

In this short article, I wish to share with you, new steps required to get a working form in Ionic 2 in Beta.11 with AngularJS 2 RC4, with a working example to play with.

Take a seat, and let’s enter the Hadron Collider for some …. ? You guessed right!

Many are broken, for good!

At the end of a relatively long post, giving reasons for some why’s and why not, a list of deprecated form APIs are listed, along with their shiny new counterparts that are now going to rule the house.

The list indicates the new name to use along with the deprecated name (name used formerly) in brackets. Now this list is probably not all there is to be deprecated.

REACTIVE_FORM_DIRECTIVES:

  • formGroup (deprecated: ngFormModel)
  • formControl (deprecated: ngFormControl)
  • formControlName (deprecated: ngControl)
  • formGroupName (deprecated: ngControlGroup)
  • formArrayName (deprecated: ngControlGroup)
  • FormControl() (deprecated: Control)
  • FormGroup() (deprecated: ControlGroup)
  • FormArray() (deprecated: ControlArray)
  • FormBuilder (same)
  • Validators (same)

We won’t be using all the above, just like we didn’t in the previous example. However, having them in mind is worth is, as you’ll be able to turn and twist as and when you need.

See the entire rc4 changelog here

Ionic 2 Forms with Examples

 

Most basic of Forms

Although I used to call this approach below ‘Implicit’ and the other way using FormBuilder as ‘explicit’, I think the right terms to use are ‘Template Driven’ and ‘Model Driven’ respectively.

The new approach is equally simple and straightforward. Let’s allow the code to speak. Let’s say this is our basic-form.html

The above is one way to create an Ionic 2 forms if you’re using Beta 11 with AngularJS RC4. Nothing much changes, except the use of [(ngModel)] instead of ngControl. Remember from above, ngControl is deprecated.

Our basic-form.js might look as straightforward as this. It doesn’t get simpler than this, does it?

Using the FormBuilder

I love the FormBuilder because it provides many more goodies and simplifies the life of the developer a ton. For instance, just like as done in the older way, using the FormBuilder can go like this (without validations):

The only difference is the importations we do. We simply indicate what type our myForm should be, which is the type of a FormGroup then with that in hand, we simply go ahead to build a form group.

Then in our forms, something like this:

With Validators

If you wish to throw in validation using Validators, you could go something like:

Then in your templates,

There you go!

Check out the new branch I created on the existing repo for the changes discussed above in action. Remember to check out the typescript branch specifically for the new way of ‘forming’ changes.

However, the older way of working with forms in Ionic 2 exist in the master branch, and you’re free to play with whichever interests you depending on what versions of Ionic 2 you’re using.

I will be keeping an eye on any changes regarding forms and keep you updated.

Thank you, and hope to see you in the next one! Any questions, feedback? Please lemme know in the comments below!

Resources

For more on forms in AngularJS 2 in general, consider following these articles:

 

  • Great post, so happy someone finally wrote a usable Ionic 2 forms post working for beta 11. This saved me so much time, thank you!

    • Ooh good. Glad you found this piece useful. Go out there and start ionizing! 😉

  • Frank Paepens

    Nice tutorials, thank you!!

    I used your code to make a test with the FormBuilder. It works, but I noticed that all controls/fields are working with string values.

    Initially I made a definition like this:

    this.partyForm = fb.group({
    ’email’: [‘…’, Validators.required],
    ‘postalCode’: [9041, Validators.required],
    ‘birthday’: [new Date(2015,1,2)]
    });

    So we have a string, a number and a date
    but then later in the onsubmit(…) I want to retrieve the update values from the form by doing:

    let newParty = this.partyForm.value;
    I can see my 3 properties (email, postalcode & birthday), but all of them are converted to strings.
    Do you know if it is possible to work with the initial data types (string, int and date)?
    Thanks!

  • Purple Edge

    Thanks for posting this Nkansah, most of the ionic 2 tutorials are still a bit out of date and I learned something from reading this!

  • Isaac Chambers

    you saved me a lot of time. Thanks. Do you know how to internalize the app with the current Ionic 2 version and Angular 2?

    • Internalize how?

      • Isaac Chambers

        Making the app support multiple languages.

        • Naa I have no idea.
          You couldn’t find any related info online?

          • Isaac Chambers

            Not lucky yet, most of them are not working.

  • amith raju

    Nice Tutorial,

    Is there a way to check if the form is submitted or not submitted?

    • When you log the form object to the console, do you see any of the fields referring to ‘submitted’?

      With angular 1.5, I remember seeing a field like that, along with $valid $invalid etc booleans.

      Otherwise, another way is to just add something like this to your form submit function:

  • Pooja Sarang

    thanks for this example..but can you tell me how we give multiple validations to one field and display error message according to error…plz tell me