AngularJS 1.3 Improves HTML Forms

The upcoming AngularJS 1.3 release arrives with a heavy focus on improved form data manipulation. While this version solves some real-life pain points, for some developers, it may not be an automatic upgrade.

The AngularJS team has starting rolling out Release Candidates of version 1.3. On a Google+ post the Angular team wrote:

most of the API for 1.3 is decided upon and the next releases up until 1.3.0 stable will be fixing the remaining bugs.

Among the new features for version 1.3 are:

• new validators pipeline
• asynchronous custom validators
• model data binding options
• ngMessages module for error message reuse
• one-time data binding support

The latest version provides developers with a new way to create custom validators, removing the need to use parsers and formatters. To create a custom validator in 1.3 the developer must register it on the new $validators pipeline and return true or false:

ngModule.directive('validateLessthanfive', function() {

  return {
    require : 'ngModel',
    link : function($scope, element, attrs, ngModel) {
      ngModel.$validators.lessthanFive = function(value) {
        return (value < 5);
      }; 
    }
  }
});

Matias Niemela, an Angular contributor, wrote a thorough write up on the new forms features including the new ability to create asynchronous validators for providing server based validation. Matias also noted the improved parity with HTML5 validators:

Now all of the HTML5 validation attributes are properly bound to ngModel and the errors are registered on ngModel.$error whenever the validation fails.

The Angular team introduced breaking changes in version 1.3, which some developers have complained should come with a major version update (e.g. version 2.0). In a recent GitHub commit Chad Moran, Software Development Manager for Woot, warns:

Making a breaking change and not bumping the major version is most likely going to create a lot of pain for users.

One change with the potential to impact enterprise developers is that 1.3 no longer supports IE8. Developers had plenty of warning since the Angular team announced this on their blog in December of 2013. Part of the reasoning behind this change is that 1.3 only supports jQuery 2.1 or above and jQuery dropped IE8 support for version 2.x.

In earlier versions of Angular, showing form validation error message was an exercise in combining ng-if directives and plenty boolean logic to display the right error message at the right time. Version 1.3 introduces the ngMessages module as an improved way to deal with complex validation error messages. An example of this new syntax from the yearofmoo.com blog post:

<form name="myForm">
  <input type="text" name="colorCode" ng-model="data.colorCode" minlength="6" required />
  <div ng-messages="myForm.colorCode.$error" ng-if="myForm.$submitted || myForm.colorCode.$touched">
        <div ng-message="required">...</div>
        <div ng-message="minlength">...</div>
        <div ng-message="pattern">...</div>
  </div>
</form>

According to Niemela, beyond reducing the lines of code, the new ng-messages module will "solve the complexity of one error showing up before the other."

It's not clear when 1.3.0 will reach a stable release, but for version 1.2, there were three release candidates spread over three months. So far there have been three release candidates for 1.3 in three weeks. Beyond version 1.3 is version 2.0 which, according to a blog post by the Angular team, will focus on making Angular a "framework for mobile apps".

AngularJS is a JavaScript framework created by Google.