Edit forms with Angular & Firebase part 2: form with sub-forms in a tabbed interface

  • Angular
  • Firebase
  • Bootstrap
Customer edit form: general tab
  • 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
  • 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…
  • general’ with class name ‘CustomerGeneral’
  • address’ with class name ‘CustomerAddress’
Code generated by the class builder



Partner at Appdnd: agency specialized in App Design & Development. Interests: technology, startups, travel & watersports.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store