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…
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:
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:
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:
- Ultimate guide to edit forms with Angular & Firebase
- Angular reactive form generation
- Edit forms with Angular & Firebase part 2: form with sub-forms in tabbed interface
Or, you can check the form builder page on our agency website.
