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:

Customer edit form: general tab

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:

Code generated by the class builder

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…