On the Bleeding Edge: Advanced AngularJS Form Validation

ianstormtaylor · on July 22, 2013

Can someone who is proficient in Angular explain to me why this many attributes are required on the form element itself:

    <form ng-app="LoginApp" ng-controller="LoginController" ng-submit="login()">

This leads to my usual reaction to Angular: I'm sure they've got some things right, and I believe that data binding is the way to go, but holy shit that code is ugly and verbose. I've been using reactive.js [1] lately with Component [2] and its incredibly beautiful by contrast:

    <form data-submit="login">

It uses data attributes, functions are handled for you automatically so you don't have to write the parens all the time, it will fallback to the model automatically if the view doesn't have a certain property. And the view is passed in so you don't need to specify what controller or "app" to search for, which seems way less tightly coupled.

Really it's one of the most beautiful libraries I've ever seen. So why would I ever want to use Angular?

I'm honestly curious since I've heard so many good things about Angular. It seems like they need a few more designers who can code on the team--people who care about the user experience part of API design.

[1]: https://github.com/component/reactive [2]: https://github.com/component/component

jeremya · on July 22, 2013

To answer your question, those attributes are not all required on the form element. From the docs on ngApp[1]:

  Use this directive to auto-bootstrap an application. Only  
  one ngApp directive can be used per HTML document. The 
  directive designates the root of the application and is 
  typically placed at the root of the page.

The ngController directive gives behavior to a scope. So, in this example, the behavior of the LoginController is available to everything within the form element. ngController could be placed on a div that encapsulated the form and the result would be the same.

The only thing really required on the form element for this example is the ngSubmit directive. The other two tags can be placed elsewhere.

[1]: http://docs.angularjs.org/api/ng.directive:ngApp

anorborg · on July 22, 2013

I can't speak with relation to reactive because I honestly don't have any experience with it. I have another tab open with you link though and look forward to reading about it. As for Angular, as I mentioned in the blog, by its very design it seems to guide you into making the _right_ decision. Its been the easiest framework I've found to keep a decent amount of separation between the view and controller logic. The binding-bits can reside in the directives. With the right approach, it is very easy to unit-test as well as A-B Test by easy swapping out views that are decorated. I definitely seed your point though that the mark-up can become a bit attribute-heavy.

EugeneOZ · on July 22, 2013

Usually ng-app and ng-controller are written in html and body tags, so forms (at least mine) looks like <form ng-submit="submit()">

Maybe Angular is too verbose sometimes in html, but it removes hundreds lines of boilerplate code from js part.