Angular reactive form generation
I recently wrote another medium story: Ultimate guide to edit forms with Angular & Firebase
It showed how you can implement basic forms with the technologies:
- Angular
- Firebase
- Bootstrap
I tried to isolate the common & repetitive code as much as possible. But you still need to write some custom code in order to get it working for your personal project.
I created a small tool that can help you with the custom code: you can find it here.
The tool is already propagated for the ‘Product’ class from my previous guide, but feel free to change the inputs for your personal needs:
Press on the ‘Clear’ button if you want to start from scratch.
Basically you can enter a class name. Than you can enter all the properties of your class in the grid underneath. For each of your properties you can optionally provide a label & placeholder. You can select a type, currently it supports:
- string: single line text
- text: multi-line text
- int: an integer value (ex: -3, 8, 11)
- double: a decimal value (ex: 3.14)
You also have some buttons for each property (on the right):
- button ‘!’: it’s a required field
- button ‘^’: move line up
- button ‘x’: delete property
And finally, press the ‘Generate’ button. Some tabs will appear below this button with the code. You should recognize the files (matching with this guide), just copy paste this custom code.
