Creating an interactive mortgage calculator form with Angular and FormQL
This tutorial shows the steps to create an interactive mortgage calculator form using FormQL and Angular
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
FormQL is a framework for building dynamic forms in Angular, it comes with a drag and drop editor and the ability to define templates using CSS Grid, you can get more details in the github repo or look at an example in stackblitz
Want to see the final version of the interactive mortgage calculator form? click here
We are going to start from an app that contains a blank form using FormQL and we’ll modify it step by step to get to the final mortgage calculator form.
The data behind the form is an object that contains the following info:
We’ll use the object above to map the data needed in the form.
Configuring fields — Step by Step
1. Open the Stackblitz page with the app that contains a blank form ( https://stackblitz.com/edit/formql-morgatgecalculator-1st)
2. Drag and drop four sections into the form using the section button on the left hand side of the editor (see below)
3. Configure three columns in the first section’s body and add six buttons to them. Sections in FormQL contain a header and a body, and their internal structure can be configured using CSS grid layout (see more details in the FormQL layout directive documentation). For instance, in CSS grid notation, a grid with three columns can be defined as following using grid-template:
Note that the grid-template-columns, grid-template-rows and grid-template-areas properties will define the structure of the section. Going back to Stackblitz where we dropped four sections, hover over the top right hand side corner of the section and click the edit button to modify the section’s body template (see below)
4. Now it’s time to configure each field, we want to use Material Design for it. Hover over the top of the component and click on edit to modify the property as shown below.
We are configuring five properties:
- Label: this is the label of the field.
- Component Name: set to FormQLMatFormFieldComponent to show the material design rather than the native input field.
- Type: type of field used in the input tag (e.g. number)
- Schema: this is the mapping to the property in the data object we intend to modify (i.e: contact.mortgageAmount for Mortgage Amount, contact.mortgageInterestRate for Interest Rate and contact.mortgagePeriod for Mortgage Period)
- Text Mask: FormQL uses text mask internally to format its fields
These settings need to be applied to the three components on the left hand side and they should end up looking like the below.
5. Repeat step 4 for the rest of the fields but making them read only and setting an expression for the calculated field rule, see below the steps (please read the calculated fields documentation for more details)
Calculated fields expression for each field:
Now is time to press the save button in FormQL, the Stackblitz example was built to save the changes to the local storage to persist them even if you browser closes.
If all the steps were done correctly, you should be able to enter the mortgage amount, interest and period in the fields on the left and the monthly payment, total cost of mortgage and total payments should be displayed as you type the first values (see below)
Creating custom components
FormQL has the ability to render custom components and still make them available in the form editor. In this second part of the article, we are going to create two custom chart components that will be embedded into the form and show two charts with the payment breakdown and mortgage amortisation.
1. Create two files in the Stackblitz project you’ve been working on and call them app-formql-mortgage-schedule.component.ts and app-formql-chart.component.ts, you can copy the files from the gist links in github. NOTE: the purpose of this step is not to understand the mortgage calculation but how to create custom components in your app and use it inside FormQL.
The files follow the implementation of components as described in the FormQL documentation: creating custom components in FormQL. The most important take from this step is that the components need to implement the ControlValueAccessor and a number of static properties used in FormQL.
2. Add the new components to the app.modules.ts and install ng2-charts which is used to draw the charts, see below the steps highlighted in red.
and here’s the whole code for the app.module.ts
3. If the steps above were done correctly and the ng2-charts package is installed in the project, you should be able to see two new components in the form and link each chart components to the form.
4. Add the Schema property on each component (it should be set to contact for both) and the configuration for each component, this is defined inside the components with the labels and the mapping between the contact object and the properties used from the form
// configuration for AppFormQLChartComponent{
"ChartLabels": {
"0": "Principal",
"1": "Interest"
},
"ChartValueMap": {
"0": "mortgageAmount",
"1": "mortgageTotalPayments"
}
}// configuration for AppFormQLMortgageScheduleComponent{
"ChartLabels": {
"0": "Mortgage amount",
"1": "Total Payments"
},
"ChartValueMap": {
"0": "mortgageAmount",
"1": "mortgageInterestRate",
"2": "mortgagePeriod"
}
}
5. Last but not least, we are adding the save button and set the action to save, that should allow you to save the data from the form. If you then open the from in view mode in FormQL, the data saved in edit mode should persist.
Conclusion
This article should hopefully give an idea of what FormQL is and how easy is to create dynamic forms in Angular, it covers three important features in the framework:
- CSS grid templating: it gives the ability to create any type of structure in the forms by simply modifying the template-area configuration
- Rules: how to create dynamic validation in the forms
- Custom components: building new components with very specific functionality is also possible and is shown in the second part of the article
Stay tuned for more articles coming up soon!!!
Follow us on twitter at @formql_io
