In the previous post, we learned to build a web form in plain HTML with no coding experience. Even though creating HTML web forms is easy, HTML does not give many options when it comes to visualization. In this blog post, we are going to create a template-driven web form using the Angular framework and Fundamental NGX Library.
Angular is a component-based framework used to build scalable web applications. Each component in Angular has an 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 that are constantly in change and provide direct access to the underlying forms object model.
The Fundamental NGX library is based on the Angular 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. The fundamental NGX Library supports both types of web forms. Unlike HTML which is a very basic and straightforward language, Fundamental NGX requires some basic understanding of the Angular framework.
You will need:
1. Installation Guide
Before getting started with the application, you will need to install all the required frameworks and libraries for this blog post.
a. Make sure you have installed NodeJs on 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.
For the complete FundamentalNGX, SAP Theming Base Content and SAP Icons, follow this guideline.
2. Getting Started
Angular applications are modular so you need to import the FundamentalNgxCoreModule in the app.module.ts file. In general, modules can contain components, service providers or other code. Every Angular application has at least one module – NgModule. In this blog post, you will add the FundamentalNgxCoreModule 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 the 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 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 to specify the type of data entered.
- Form Message: It is used to create user validation warnings when the data type doesn’t match 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 on 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
Similar 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.
5. Run the Project
ng serve
This article focused on building a registration part with fewer efforts and with better graphics using the 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 the Fundamental NGX Library. For more information, follow the Fundamental Library community. If you have any questions feel free to post them in the comment in the section below or in SAP Community Q&A.
