Template-driven Web Form in Fundamental NGX

In the previous post, we learned to build a web form in plain HTML with no coding experience. Despite the fact that creating the HTML web forms is easy, HTML does not give much options when it comes to visualization. In this blog post we are going to create a template-driven web form using Angular framework and Fundamental NGX Library.

Angular is a component-based framework used to build scalable web applications. Each component in Angular has a HTML template and a CSS component style which show how the component will be rendered and displayed in the webpage, and a TypeScript component class which gives the value to the component.

Angular offers two types of web forms: template-driven and reactive. Template-driven forms are widely used in login, sign up and contact forms. They are easy to be implemented and every user validation and manipulation is done in the HTML template. On contrary, reactive forms are more dynamic and powerful. They handle values which are constantly in change and provide direct access to the underlying forms object model.

Fundamental NGX library is based on AngularJS framework and Fundamental Styles, giving its components a modern look. It offers already built and ready to use components which reduce drastically the overall coding time for the developer. Additionally, the library doesn’t require any additional styling for the components.Fundamental NGX Library supports both types of the web forms. Unlike HTML which is a very basic and straightforward language, Fundamental NGX requires some basic understanding of the AngularJS framework.

 You will need:

1. Installation Guide

Before getting started with the application, you will need to install all the required framework and libraries for this blog post.

Angular:

a. Make sure you have installed NodeJs in your computer.

b. Check the version of NodeJS in the terminal node -v.

c. Install Angular through the terminal npm install -g @angular/cli.

d. Create a new angular project using ng new my-app.

FundamentalNGX:

For the complete FundamentalNGX, SAP Theming Base Content and SAP Icons, follow this guideline.

2. Getting Started

Angular applications are modular and as so you need to import the FundamentalNgxCoreModule in the app.module.ts file. In general modules can contain components, service provides or other code. Every angular application has at least one module – NgModule. In this blog post you will adding the FundamentalNgxCoreModule in order to load all the components the library has. If you want to use only specific components in your application, you can load particular components within the fundamental-ngx/core library.

Example:

import { FdDatetimeAdapter} from '@fundamental-ngx/core/datetime';

3. Template-driven Form

To enable the template-driven form in our project, we need to import ngModel and other form-related directives in our AppModule.

After importing the directives, we can start creating the form in the app.component.html.

<form #register="ngForm" (ngSubmit)="submit(register)" >

4. Implement Components

One of the benefits of working with Fundamental NGX library is that, you do not need to create components from scratch. Once the FundamentalNgxCoreModule is installed, you can use all the components the library offers. The library also offers a very well explained documentation which helps with the implementation of the components in the project. For this registration page you will be using the following components.

  • Input Group: It offers an easier way to place an icon as well as a placeholder within the input in order to specify the type of the data entered.
  • Form Message: It is used to create the user validation warnings when the data type doesn’t match in the input.
  • Radio Button: It is used in the gender part of the form for the user to pick up one of the options.
  • Textarea: It is used in the short bio option so the user can enter a multiline input data type.
  • Combobox: It is used in two occasions: country pick and ice cream flavours pick. It shows the options through a dropdown menu.
  • Checkbox: It is used to create the remember me option where the value can be either True or False.
  • Date Picker: It is used to create the date of birth in the registration form.

4. User Validation

Similarly to the HTML form, user validation in template-driven forms is done by adding attributes to the elements. For instance, in the first name input component the user validation is a combination of attributes:

minlength="3" maxlength="10" pattern="[a-zA-Z]+" . If the user does not respect the format of the data input, then an error message will trigger and show below the input group.

After the user has filled out all the inputs correctly, the user is able to submit or reset the registration form. In both cases a busy component indicator will appear. The reset button will reset all the fields so the user can refill the registration form. If submit button is pressed, all the details filled in the registration form will be saved in an array.

5. Run the Project

Similar to any angular project, to run this registration project, you need to type in the terminal the following command:

ng serve

Make sure to follow the localhost url link in order to checkout out the project in a browser.

This article focused on building a registration part with less efforts and with better graphics using Fundamental NGX library. The full version of the code can be found here and the code deployed here. As it is presented in the screenshot above, the form has a modern look with minimal code. We didn’t need to implement any styling properties to our form or components. In the following post we are going to focus on reactive forms using Fundamental NGX Library. For more information, follow the Fundamental Library community. If you have any question feel free to post it on the comment on the section below or in SAP Community Q&A.