BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

AngularJS 1.3 Improves HTML Forms

| by David Iffland Follow 3 Followers on Sep 18, 2014. Estimated reading time: 2 minutes |

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT