Dynamically add and remove form input fields with Ionic

Categories

Forms are rarely fun to work with - particularly when there's all manner of data capture and parsing requirements that your application might need to fulfill.

Thankfully this burden is lightened considerably with Ionic's range of UI components and Angular's FormBuilder API, both of which allow for the rapid development of forms for Ionic web/mobile applications.

Over the course of the following tutorial I'm going to guide you through using these tools to create a form that allows input fields to be dynamically added/removed and validated along with all entered data successfully captured upon form submission.

What we'll be developing

Our Ionic application will consist of a single page with a form that allows a user to enter a technology framework name (I.e. Ionic, React, Angular etc) and then add additional fields for their associated technologies (I.e. TypeScript, HTML5, Apache Cordova etc).

On initial launch the application will appear as follows:

Once data has been entered into these fields the user can, if they wish to, add further Technology fields as demonstrated below:

As you can see each input field now also displays an option allowing the user to remove that generated field (and any data that it might contain) should they change their mind.

When the form is submitted the data is simply logged to the browser console as a JavaScript object like so:

You can, of course, handle the submitted data how you want!

Getting started

Assuming you have the latest version of Ionic installed open your system CLI software, navigate to where your digital projects are located and create the following ionic project named ionic-input-generata using a blank project template structure:

ionic start ionic-input-generata blank

We won't be installing any Ionic Native/Apache Cordova plugins or third-party libraries so, once the project has been generated, we can proceed straight to the component logic and templating.

Coding the form management logic

Within the HomePage component class we're going to make use of the following Angular modules to handle all form management tasks from input field generation and validation to tracking the removal of dynamically generated form input fields:

FormBuilder - Helps to structure and coordinate FormGroup, FormArray and FormControl instances used within a template form

FormGroup - Tracks the value and state of a group of FormControl instances - aggregating all values into an object

FormArray - Tracks the value and state of FormControl instances within a form - aggregating all values into an array (useful for when we don't know how many FormControls we might need)

This is followed, within the HomePage class, by defining a publicly available FormGroup property which will act as a bridge between the component class and its template allowing communication between the two to take place:

Within the class constructor we then use the FormBuilder API to programmatically create an object which defines the validation rules for the template form (for the purposes of this tutorial these validation rules are VERY basic and simply require that NO empty form fields be submitted - you can modify these rules as you see fit).

You'll notice within this FormGroup object that we define an array for the technologies array which calls a method named initTechnologyFields():

This FormGroup is returned within its own method as we want to provide the ability for the user to dynamically add new technology fields to the template.

How this works is relatively simple.

Every time a new input field is added to the form a new FormGroup object, responsible for managing only that generated field, is created. This allows for dynamically generated fields to have their own default FormGroup management automatically initialised and made available simply through calling this method.

By adopting this approach we offload all the form management logic to Angular which handles all of that in the background for us.

No complicated DOM scripting or recursive loops to manage/track input field generation - we simply leave Angular to manage our form state instead courtesy of the FormGroup and FormArray modules (we'll see how these plug into the component template's form a little later on).

With the FormGroup logic in place we next move onto defining the logic for generating new input fields for the form with the addNewInputField() method:

With the form management logic in place it's time to turn our attention to the component template and see how the markup is structured to allow the HTML form to be managed by and communicate with the component class.

The HTML markup should be self-explanatory (with the addition of comments to explain how property bindings are used to connect Angular's FormGroup and FormArray objects - that have been set up in the component class - with the template's form) so now let's move onto testing our application.

The proof is in the pudding

All our coding efforts amount to naught without testing so let's run the ionic-input-generata application in our desktop browser using the following command issued within our system CLI software:

ionic serve

Coding errors aside you should experience the application being launched and running like so:

Now play around with adding and removing input fields and then submitting the completed form data!

In summary

Thanks to Angular's FormBuilder, FormGroup and FormArray classes generating and removing input fields is vastly simplified as the heavy lifting is managed internally by the framework. This frees us to concentrate on other application development tasks without worrying about performance, optimisation or other headaches/challenges that might befall us were we to try accomplishing this without a framework.

If you enjoyed this tutorial then feel free to share your thoughts, reactions and suggestions in the comments section below.

If you liked what was written here then please consider signing up to my FREE mailing list to stay updated on further articles and e-books that I have in the pipeline.

Tags

Categories

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.

In the following tutorial I'm going to guide you through using Angular FormBuilder, FormGroup and FormArray modules to dynamically add and remove input fields in forms for your Ionic framework applications...

Thank you for signing up to the mailing list!

Error!

You might also like...

Let's face it, form validation is one of those tasks rarely enjoyed by developers - particularly with the volume of data checks and requirements that often entails - but thanks to Angular's FormBuilder class validating online forms just got a little easier...