Angular form input redundancy08 Aug 2014
I love angular for the simplicity offered by the two-way binding between form inputs and displayed values. It also has pretty good mechanisms for validating and sanitizing data.
But I hate angular for how it treats the HTML markup as a second class citizen. You have to pollute your markup with all sorts of attributes, and it ends up with a great deal more logic than it should.
Angular is good for making complex forms, so you'll write quite a bit of them. You'll end up with some very long views, with a great deal of redundancy. This is not DRY at all, and it leaves a bad taste in my mouth.
Let's take a sample form :
<form name="subscription" novalidate> <label for="firstName"> <input type="text" name="firstName" id="firstName" ng-model="firstName" ng-required> <label for="lastName"> <input type="text" name="lastName" id="lastName" ng-model="lastName"> <button type="submit">Submit</button> </form>
Give them a name
Every input field should have a
name attribute. Otherwise you won't know
which input holds which value once submitted to your backend. Even if you're
not submitting the form in the usual web 1.0 way but using
fancy-ajaxy-asynchronous-SPA mechanisms, you're still basically sending a list
of key/value to your backend.
Adding some validation
Let's say I need the
firstName to be required. Good thing I'm using Angular,
I only have to add the
ng-required attribute and I'm done.
Well... not quite. You'll also have to add a
novalidate to the parent
otherwise the browser default validation mechanism might interfere.
You'll also need to add a
name to the
form. And make sure that neither the
name nor the input
name include any dash (
-), otherwise it might
So what about accessibility ?
For accessibility reasons, you have to bind your labels to the corresponding
input elements. For
checkbox element you can get away with
wrapping the actual
input inside the
label, but for text element the
attribute on the
label must be used.
The value of the
for on the label must be equal to the value of the
the input. That's too bad we have to use an
id, it would have been so much
easier if we could simply reuse the
name field. But no, let's repeat
ourselves and add an
How do I access my data ?
Now that you have a form and Angular, you'll want to access the data right ? There are two ways you can access data from your form in your Controller.
If you give a name to a form, you can access it in the scope simply by
referencing it by name. In our example, you now have access to
$scope.subscription on the Controller. I don't really like Angular defining
objects in my
$scope from something defined in the view. It might overwrite
another object with the same name I defined in my controller.
Anyway, you can then access informations about the form from this object. It
contains keys for each input fields (using their
name attribute), which in
turn holds informations about their validation (
$pristine) and the value it holds (
I don't really like tapping into this object either as it seems too low level into Angular own plumbing system.
The other way, the recommended one, is to manually define with which value each
input is bound, using the
ng-model attribute. You'll usually re-use the same
name you already used for
id (unless you want to be really
As you've seen, this absolutely does not follow the DRY principle. Angular, contrary to Ember, is not a Convention over Configuration framework, and we can clearly see this weakness here.
This gets worse when you have to add new fields
to your form. You won't rewrite them from scratch, so you'll use copy/paste and
expose yourself to errors. If you forgot to change one
ng-model you might create weird bugs, hard to find, because their root cause
is inside your 300 lines long view file.
A solution ?
I haven't found a satisfying solution to this problem as of today. The only one
I can think of could be a macro in your IDE to auto-generate input fields with
the right name written in
ng-model. But this is hardly
a portable solution. The other one would be to create a metadirective that
automatically adds the correct value in the correct attribute. But writing
directives that adds other directives is complex and I'm not sure if it will
not simply hide the complexity away and make it even harder to debug.
Want to add something ? Feel free to get in touch on Twitter : @pixelastic