Angular form input redundancy

08 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 form 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 form name nor the input name include any dash (-), otherwise it might silently fail.

So what about accessibility ?

For accessibility reasons, you have to bind your labels to the corresponding input elements. For radio and checkbox element you can get away with wrapping the actual input inside the label, but for text element the for attribute on the label must be used.

The value of the for on the label must be equal to the value of the id on 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 id field.

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 ($valid, $invalid, $dirty, $pristine) and the value it holds ($modelValue and $viewValue).

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 name and id (unless you want to be really confusing).

Copy/Paste nightmare

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 name, id or 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 name, id and 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

Pixelastic