Reactive forms are forms that are defined programmatically at the level of the component class. Compared to the template-driven web forms we saw in the previous post, there aren't many differences in the way the forms are displayed in the browser. Rather a blunt difference between those two is the way they are programmed. In reactive forms, most of the logic and implementation are focused on the component typescript part. Reactive forms are synchronous, making the web forms easier to manage and more accessible. They are mostly used to create more complex and scalable web forms. In this blog post, we are going through the implementation of the reactive forms using the Fundamental NGX Library.
You will need:
Similar to the template-driven blog post, the first step is to install all the required frameworks and libraries to pursue creating a reactive web form in FundamentalNGX.
Angular:
An a. Make sure you have installed NodeJs on your computer.
b. Check the version of NodeJS in the terminal
c. Install Angular through the terminal
d. Create a new angular project using
FundamentalNGX:
Follow this guideline for the complete FundamentalNGX, SAP Theming Base Content, and SAP Icons.
Angular applications are modular and as so, we need to import the FundamentalNgxCoreModule in the app.module.ts file. We are loading all the components needed to build an application using the Fundamental NGX library adding it. If you are looking to not make the application heavy you can load particular components within the fundamental-ngx/core library.
Example:
To create a reactive form, we need to add the ReactiveFormsModule from angular in our project.
After importing the directives, we can start building a reactive form in the app.component.html.
The benefit of using the Fundamental NGX Library is that you do not need to create components from scratch. Once the
One of the differences between the template-based and reactive web forms is that the logic of the user validation in the reactive forms is implemented in TypeScript. Reactive forms are known for using the state of the form to maintain the integrity of the form. They provide synchronous access to the data model which makes it easier to track the changes of each input. The code below shows an error message every time the user doesn't match the required format for the input data.
You will need:
1. Installation Guide
Similar to the template-driven blog post, the first step is to install all the required frameworks and libraries to pursue creating a reactive web form in FundamentalNGX.
Angular:
An 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.FundamentalNGX:
Follow this guideline for the complete FundamentalNGX, SAP Theming Base Content, and SAP Icons.
2. Getting Started
Angular applications are modular and as so, we need to import the FundamentalNgxCoreModule in the app.module.ts file. We are loading all the components needed to build an application using the Fundamental NGX library adding it. If you are looking to not make the application heavy you can load particular components within the fundamental-ngx/core library.
Example:
import { FdDatetimeAdapter} from '@fundamental-ngx/core/datetime';3. Reactive Form
To create a reactive form, we need to add the ReactiveFormsModule from angular in our project.
After importing the directives, we can start building a reactive form in the app.component.html.
<form [formGroup]="reg">4. Implement Components
The benefit of using 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 implement the components in the project. We mentioned each component we incorporated into our project in the previous post. Indeed we used the same components for the reactive web forms but with the difference that each component is a reactive-based one. The documentation of the Fundamental NGX Library offers examples of how to use the library's components in a reactive-based form. The difference between those two is that in the reactive forms most of the logic of the component happens in the TypeScript file.- 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 is used on two occasions: country pick and ice cream flavors 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
One of the differences between the template-based and reactive web forms is that the logic of the user validation in the reactive forms is implemented in TypeScript. Reactive forms are known for using the state of the form to maintain the integrity of the form. They provide synchronous access to the data model which makes it easier to track the changes of each input. The code below shows an error message every time the user doesn't match the required format for the input data.
getFieldState(formControl: AbstractControl) {
returnformControl.invalid && formControl.touched ? 'error' : undefined;
}
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 serveMake sure to follow the localhost URL link to check out the project in a browser.
In this article, we focused on building a reactive web form 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. In the following post, we are going to focus on reducing the coding time and effort when building a web form 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.
- SAP Managed Tags: