How to use Angular Dynamic Forms in Ionic Applications

Published in

Appseed IO

8 min readMay 16, 2018

In this post, you will learn how to create Angular Dynamic Forms in Ionic apps based on metadata that describes them. At the end of this tutorial, we will present two Ionic pages as a working example which demonstrates two different form structures with the most commonly used fields. For this, we will:

Use the Supermodular2 starter app and set it all up and running.
Put into action the Dynamic Forms example included in Angular Cookbook.
Implement two modules to showcase two demo-forms with a different configuration.

Note: The complete source code of this tutorial is available in the ionic-dynamic-forms Github repository.

Download code

StackBlitz Demo

Prerequisites

To follow along with this tutorial, you will need:

Supermodular2: This is a free starter template that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 3 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
Ionic Dynamic Forms: You will need to download the implementation from here.
A static hosting service: You need access to a static hosting service where configuration files are stored.

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.

Step 2: Install Libraries

Open a terminal window and navigate to the supermodular2 local folder. Install the NodeJS dependencies:

$npm install

Step 3: Run the Starter App

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab

or for a web preview:

$ionic serve

From the Platforms menu you can toggle between the available platforms(iOS, Android, Windows Phone).

Step 4: Scaffolding our Demo Forms Modules

CREATE FOLDERS & MODULES

We create two folders namely form1, form2 under src/pages. Inside them, we create the files form1.module.ts and form2.module.ts respectively, and copy the following code

ADD MODULES TO APP.MODULE.TS

Now that we have our modules ready, it is time to add them to our app.module.ts

CREATE CONTROLLERS

We create the files form1.page.ts and form2.page.ts under src/pages/form1 and src/pages/form2 respectively. These files will be our controllers and match with the modules previously created. In line 14 we create a form instance for binding data to the DOM later.

Copy the following code

CONNECTING CONTROLLERS WITH MODULES

After we have created the controllers, we must connect them with their corresponding modules.
For form1.page.ts, we change form1.module.ts as it follows:

And for form2.page.ts, we change form2.module.ts

CREATING TEMPLATES

We create the file form1.html under src/pages/form1 and file form2.html under src/pages/form2. We will leave the templates empty for now. Next, we wire these templates with their controllers.

Changes in form1.page.ts

Changes in form2.page.ts

Finally, we add the following code to app.components.ts in order to create two new entries in the side navigation menu of the application.

FIRST LOOK

It’s time now to test what we have implemented so far.

$ionic serve

At this point the two forms are empty and our Ionic app looks like this:

Step 5: Add Files of the Ionic Dynamic Forms Implementation

Under the src folder we create the common folder and, under src/common, we create the forms folder.
Inside the forms folder we add the files contained in this repository:
http://appseed.io.s3.amazonaws.com/public/website/angular-dynamic-forms-...

As shown above, 3 types of user input elements are supported:

Textbox, a commonly-used single line input
Textarea, a multi-line input area
Select, a list of distinct options

WIRING FORM LIBRARY WITH MODULES AND CONTROLLERS

Finally, we need to connect the dynamic form files with the modules and controllers previously created.

For the first form1:

Respectively for the form2:

Step 6: Creating Form Configuration Files

The key feature of Angular Dynamic Forms is their functionality to dynamically display any form that is described from a configuration file. In our implementation of Ionic Dynamic Forms we chose to use JSON files, with specific structure, as our descriptive configuration files.

An example of a textfield and its properties is shown below:

[ 
  { 
    "name": "title",
    "type": "text", // “text”, “select”, “textarea”
    "required": false,
    "display": "selected",
    "selected": true,
    "title": "Title"
  }, …
]

Then we upload the configuration files to a server (In our example we used Amazon AWS. Any other static web server works just as good).
We created two JSON files with different arrangement of field types. The first describes Football Players and the second describes Movies. They can be accessed through the following links:

Step 7: Getting Configuration Files from the Server

In order to access the configuration files, we created and uploaded to the server, we use a service. Under src/services , we create a file called form-config.service.ts and add inside it the following code. It is a simple HTTP request of method GET.

IMPORT FormConfigService

In the next step, we make the getFormConfig(filename) method available by importing its class FormConfigService.

For the form1:

And for the form2:

CREATING THE FORMS BASED ON CONFIGURATION FILES

We call the getFormConfig(filename) method from FormConfigService and an Observable is returned. We subscribe to the Observable and map it as a JSON file thus we create the necessary data for our demo form. By putting our code inside ionViewWillEnter(), we ensure its execution upon view entering every time.

Step 8: Creating the Templates

USING DYNAMIC FORMS TEMPLATE

In order to display our forms properly we use the DynamicFormComponent and its corresponding template. Both of these files are located under src/common/forms and they are part of the Ionic Dynamic Forms implementation that we introduced in Step 6.

In order to use the Ionic Dynamic Forms template we have to use the tag <dynamic-form> [controls]=”…” [form]=”…” </dynamic-form>,
where

controls is an array of form controls as described in JSON configuration files
form is the Ionic Dynamic Form to be displayed

Finally we add the following code to our templates.

Template for the form1.html under src/pages/form1:

Then we create form1.scss under src/pages/form1 and we add the following code. This is for displaying the waiting screen while data is being retrieved from the server.

Template for the form2.html under src/pages/form2:

We create form2.scss under src/pages/form2 and we add the following code.

SUBMIT FORM

Inside the form templates, we also included a “Submit” button. By clicking it, an Ionic alert pops up with a success message. Also, a “Success” message is displayed on the browser console alongside with the form input values.
In order to listen for changes of the form values, we used the valueChanges() method which is available for FormGroup instances, like form in this case.

Add the following code to form1.pages.ts under src/pages/form1

Add the following code to form2.pages.ts under src/pages/form2

Step 9: Final Result

Form 1 is about a football player entry with some trivial attributes. As seen, the “Position” and “Preferred Foot” fields are of type select and “Career Achievements” of type textarea while the rest are text.