Don't repeat yourself: Forms in Angular, best approach and practises

Martin Spierings

unread,

Jul 7, 2014, 5:23:48 AM7/7/14

to ang...@googlegroups.com

Hi all,

Currently i'm working on a project which has some settings-pages. Now i've been using basic Angular practises to get these forms up and running. I've got the fields, the labels, the models, error handling, translations and styling in place and connected that to data checking and api services, but i feel that i'm begin to repetitive. I think this will go better with directives but i'm not sure if that is the best way to go. Since my forms will look pretty much the same, would like to make some generic building blocks to easily define my form fields and create new pages in a matter of minutes instead of hours.

The main problem for me is that i'm not really into directives just yet and i'm not sure if there are modules or other extensions which could make this easier.

So what are best practices for creating standardized forms in Angular projects? Creating generic building blocks to make my life easier and cut some time of my workload.

For example: i have an input text field with label which is connected to a model and shows a translation in the label.
Another example i have a checkbox with label where the checkbox is hidden and the label has a :before style for displaying a custom checkbox image (so its cross platform and more finger-friendly due to the "input[type=checkbox] + label" css rule). Of course we also have the translation in the label and a model connected to the input checkbox.

Both of these examples will trigger a form submit on-change so we don't need a submit button and i'll show errors on top of the form.

Now i have like 10 or perhaps 20 pages with forms to handle all my settings and i only use like 1 or 2 styles for each form element. I feel that if i setup a custom element (like <checkbox> ) and connect a scope array to set all proper values on this checkbox including the model, i would have less redundancy on my code and allows for easier adjusting and maintaining. But i'm not sure how i do this and if there are better/faster alternatives. My code itself is pretty standard-html and my styling handles how it is shown (with good cross-browser cross-version support).

Or is this something Angular itself is working on to create more directives for forms? Cause at the moment it feels like i'm not the only one with this issue.