Ultimate Angular Forms: Part III

You can spend a few days to code the forms for your next Angular project or you can generate most of the code and only spend a few hours…

Image for post
Image for post

If you’re interested to see how you can boost your coding performance when creating forms for the combination Angular-Bootstrap-Firebase than read on (and hopefully enjoy).

But even when you’re not using Firebase, you could use most of this procedure: you only need to replace the Firebase services with whatever service you need…

Before diving into the details, I also want to mention that I wrote some past articles in this series (see bottom), especially the first article is crucial since we build on top of that same foundation: Ultimate guide to edit forms with Angular & Firebase.

In these previous posts, you could only generate code for basic controls such as text & number inputs. In the meantime, I invested some time to also generate other controls, such as:

  • checkboxes
  • passwords
  • radio button groups
  • date inputs
  • single & multiple selections

You can for instance generate this type of form very easily:

Image for post
Image for post
Controls demo edit form

Of course you’re responsible to cheer up these forms to make it more attractive for your users!

This form was generated by using the generator that is publicly available:

Image for post
Image for post

Than, all you have to do is press the generate button. If you scroll down you will see some tabs with the generated code:

Generated code

The first tab is, for instance, the code for the model class that corresponds to your form. The other tabs contain the code for both the edit & grid components. Just copy/paste this generated code to the correct places in your project.

Now you probably wonder: what are these correct places? Well, follow the procedure from my first post in this series: Ultimate guide to edit forms with Angular & Firebase.

If you want to generate your own custom forms, then press the “Clear” button in this builder, and create your own custom forms & classes.

I think the tool is really powerful (although I’m not really in place to say this…) because it can also create forms with sub-forms in a tabbed layout with all these different controls in it (read also this).

In the code generator you can also select your preferred Angular form approach:

  • Reactive
  • Template driven

I updated the base classes to support both scenarios!

Hope it can help some of you in your next project. Let me know what you think or clap if you find it useful in some way!

Previous posts

My previous posts about this topic:

Or, you can check the form builder page on our agency website.

Written by

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

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