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.
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:
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:
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:
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
src/pages. Inside them, we create the files
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
We create the files
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.
form1.page.ts, we change
form1.module.ts as it follows:
form2.page.ts, we change
We create the file
src/pages/form1 and file
src/pages/form2. We will leave the templates empty for now. Next, we wire these templates with their controllers.
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.
It’s time now to test what we have implemented so far.
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
src folder we create the
common folder and, under
src/common, we create the
forms folder we add the files contained in this repository:
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:
"type": "text", // “text”, “select”, “textarea”
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.
In the next step, we make the
getFormConfig(filename) method available by importing its class
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>,
controlsis an array of form controls as described in JSON configuration files
formis the Ionic Dynamic Form to be displayed
Finally we add the following code to our templates.
Template for the
Then we create
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
src/pages/form2 and we add the following code.
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
Add the following code to
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
Form 2 is a movie form with the “Storyline” and “Cast” fields being
textarea, “Genre” being
select and the rest
Originally published at http://www.appseed.io/blog/how-use-angular-dynamic-forms-ionic-applications.