Edit forms with Angular & Firebase part 2: form with sub-forms in a tabbed interface
A few weeks ago I wrote an article ‘Ultimate guide to edit forms with Angular & Firebase’ where I gave a detailed procedure to develop a basic forms with the technologies:
- Angular
- Firebase
- Bootstrap
In this article we’ll go 1 step further: we’ll create an interface for a form with multiple sub-forms. The data of the sub-forms will be modeled as sub-objects of the main object in our NoSQL Firestore database.
Sound complex? No worries, I will provide you with a tool that will do most of the heavy lifting if you want to repeat this procedure for your own projects.
First a screenshot:
So notice that:
- we build a form to edit customers (in the previous article it was for products)
- we now have a tab-strip with several tabs, each tab contains some fields that logically belong together
- the header label of a tab is red, whenever there’s at least 1 an invalid field within the tab
You can follow exactly the same procedure as the one described in my previous article, it you take the following into account:
- replace the word ‘product’ with ‘customer’ and respect the casing on all places
- most of the custom code can be generated with the class builder, feel free to replace the class name & property names to whatever you want…
Some info about the class builder:
Notice that we have 2 root properties of type ‘inline class’:
- ‘general’ with class name ‘CustomerGeneral’
- ‘address’ with class name ‘CustomerAddress’
Each of these inline classes have some sub-properties. For instance the general property defines the sub-properties ‘name’ and ‘info’, where ‘name’ is a required property (see the exclamation mark that is colored at the right).
When you press the ‘Generate’ button, you will find all the custom code needed to get this example working:
The combination of this generated code (see the different tabs above) with the generic classes that I made available in my github example should give you a good jumpstart.
I’ll try to give some extra info about the inner-working of this example in the coming days…