Ultimate Angular Forms: Part III

Frank Paepens
Mar 6 · 3 min read

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…

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:

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:

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.

Frank Paepens

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade