Form validation using Angular JS

User input validation is a crucial feature to be implemented in any data driven application. We have a number of libraries that support input validation on client side and all of them address this issue in a very effective way. Since Angular JS is designed to make the process of client side data driven application development easier, it also has a nice support of user input validation.

Angular is capable of validating HTML5 input types like required, url, number and email. It also provides some directives like min, max, minlength, maxlength and required for validation. If any of these built-in features is not able to address the business purpose, we can define our own directive and use it for validation.

To indicate the user about validity of form data, the following CSS classes can be defined. They will be applied to the input fields by Angular JS whenever they are required:

• ng-valid – Applied if the value satisfies validation rules
• ng-invalid – Applied if the value doesn’t satisfy validation rules
• ng-dirty – Applied only when there is change in the value of the field
• ng-pristine – Applied if the field is untouched

Let’s apply some validations to the shopping cart item form that we have been using in earlier posts. If you didn’t read old posts yet, refer to the jsfiddle sample of the last post. Following are the CSS styles that will be applied on the form elements:

input.ng-invalid.ng-dirty {
 background-color: #FA787E;
}
input.ng-valid.ng-dirty {
 background-color: #78FA89;
}

Let's apply the following validations on the cart item form:

• All fields are required – can be done using required attribute
• Item name should contain only alphabets and spaces, quantity should be an integer – can be achieved using pattern directive
• Price should be a float number with value between 50 and 5000 – can be done using a custom validation (Note: Though it can be achieved using pattern, I am using custom validator for demonstration)
• Quantity should be an integer with minimum value 1 and maximum value 90 – can be achieved using min and max directives and a regular expression to check for integer

If the browser supports HTML5, browser will also validate the form elements. This behaviour can be supressed using novalidate attribute on the form tag. Following is the mark-up of item form with validation attributes applied:

<form novalidate name="itemForm">
 <table>
  <tr>
   <td>Name: </td>
   <td><input name="name" type="text" ng-model="item.Name" required ng-pattern="name" /></td>
  </tr>
  <tr>
   <td>Price: </td>
   <td><input name="price" type="text" ng-model="item.Price" required  valid-price /></td>
  </tr>
  <tr>
   <td>Quantity: </td>
   <td><input name="quantity" type="number" ng-model="item.Quantity" min="1" max="90" ng-pattern="integerval" required /></td>
  </tr>
  <tr>
   <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" ng-disabled="itemForm.$invalid" /> </td>
  </tr>
 </table>
</form>

Notice the ng-disabled directive on the button. It is used to disable the button if any of input elements in the form is not valid.

To match the pattern of name and quantity fields, ng-pattern attribute is applied on them. The corresponding patterns have to be assigned to a field in the controller.

$scope.name=/^[a-zA-Z ]*$/;

$scope.integerval=/^\d*$/;

For the custom validation to validate price, a directive with the name validPrice has to be created. Let’s add this directive to the shopping module we created in last post.

angular.module(‘shopping’,[])
 .value(…)
 .filter(…)
 .directive('validPrice',function(){
  return{
   require: "ngModel",
   link: function(scope, elm, attrs, ctrl){
    var regex=/^\d{2,4}(\.\d{1,2})?$/;
    ctrl.$parsers.unshift(function(viewValue){
     var floatValue = parseFloat(viewValue);
     if( floatValue >= 50 && floatValue <=5000 && regex.test(viewValue)){
      ctrl.$setValidity('validPrice',true);
     }
     else{
     ctrl.$setValidity('validPrice',false);
     }
     return viewValue;
    });
   }
  };
 });

With this, we are done with all validations. But this leaves the form in invalid state whenever the input fields are cleared after adding an item to the cart. To prevent this behaviour, we have to manually set the form’s state as pristine. Following statement does this for us:

$scope.itemForm.$setPristine();

This statement has to be added to the addItem function of the controller. Though the validations are doing a great job by indicating the invalidity of data on input fields, the user won’t get to know about what has to be modified unless a friendly message is displayed. Message can be displayed in any format that you like. To keep it simple, I am displaying the messages in span elements. An invalid message should be displayed when both of the following conditions meet:

• An input field is modified – can be checked using $dirty
• Contains an invalid value – can be checked using $invalid

Following is the markup for displaying error message:

<div ng-show="itemForm.name.$dirty && itemForm.name.$invalid">
 <span ng-show="itemForm.name.$error.required">Name cannot be left blank</span>
 <span ng-show="itemForm.name.$error.pattern">Name cannot contain numbers or special characters</span>
</div>
<div ng-show="itemForm.price.$dirty && itemForm.price.$invalid">
 <span ng-show="itemForm.price.$error.required">Price cannot be blank</span>
 <span ng-show="itemForm.price.$error.validPrice">Price should be a number between 50 and 5000 with maximum 2 digits after decimal point</span>
</div>
<div ng-show="itemForm.quantity.$dirty && itemForm.quantity.$invalid">
 <span ng-show="itemForm.quantity.$error.required">Quantity cannot be blank</span>
 <span ng-show="itemForm.quantity.$error.pattern || itemForm.quantity.$error.min || itemForm.quantity.$error.max">Quantity should be an integer between 1 and 90</span>
</div>

Carefully examine the ng-show directives applied on the div and span elements. The pattern of each condition is in every ng-show directive is:

<form-name>.<element-name>.$error.<type-of-validation>

If there are multiple conditions for one error message, they have to be combined using AND(&&) or OR(||) depending upon the need.

The complete sample is available at the following jsfiddle:


Further learning:

• Angular JS Developer guide
• Jsiddle examples on Angular Wiki

Happy coding!

Modules in Angular JS

Angular JS supports modules, using which we can divide the JavaScript code involved in our application. Creating modules not only helps separating the code into individual concerns but also improves unit-testability. The modules can be easily replaced by some mocks while unit testing Angular controllers.

Following is the syntax of creating and registering a module:

angular.module(‘module-name’,[dependencies]);

Every module should have a name, which is specified in the first parameter. Second parameter to module function is an array, which may contain names of other modules or services. If the module doesn’t depend on anything, the array can be left blank.

To a module, we can add services, filters, directives, constants, configuration blocks and run blocks. In large applications, it is recommended to add each of these to separate modules. A typical module with all of these blocks added looks like the following:

angular.module(‘module-name’,[dependencies])
 .value(‘service-name’,{
  //properties and functions to be added to the service
         }).
         filter(‘filter-name’,{
         //definition of filter
         }).
         directive(‘directive-name’,function(parameters){
         //directive definition
         }).
         constant(‘constant-name’,object).
         config(function(injectables){
         //configurations to be applied
         }).
         run(function(injectables){
         //code to kick-start the application
         });

In last two posts, we created a shopping cart with functionalities to add and remove items, calculate total price, sort and filter data present in the cart array. Since controller should play the role of mediator, let’s separate data of shopping cart and operations into a separate module and call these functions from controller wherever we need the functionality to be executed. Following is the module that holds data and performs required operations on the data:

angular.module('shopping',[])
   .value('shopping_cart_operations',{
    items : [
     {Name: "Soap", Price: "25", Quantity: "10"},
     {Name: "Shaving cream", Price: "50", Quantity: "15"},
     {Name: "Shampoo", Price: "100", Quantity: "5"}
     ],

    addItem: function(item){
     this.items.push(item);
    },

    totalPrice: function(){
     var total = 0;
     for(count=0;count<this.items.length;count++){
      total += this.items[count].Price*this.items[count].Quantity;
     }
     return total;
    },

    removeItem: function(index){
     this.items.splice(index,1);
    } 
   });

As controller requires the functions defined in the service shopping_cart_service, it has to be passed as a dependency to the controller. The dependency will be automatically resolved at the run-time from the module.

Angular makes heavy usage of Dependency Injection. As we have already discussed in first post, $scope is a mandatory parameter to the controller, but we didn’t discuss about from where it gets its behaviour. It is a service defined in the library and gets injected into the controller when we refer to it by its exact name. To refer it using some other name, we have to assign the modified names to $inject property in the same sequence in which they have to be passed into the function.

MyController.$inject = [‘$scope’, ‘any_other_service’];

After this, we can define the controller as follows:

function MyController(myScope,otherService){
 //Controller body
}

Here, myScope and otherService will hold the values of $scope and any_other_service respectively. To learn more on dependency injection on Angular JS, you can refer to the official website of Angular JS.

Let’s modify ShoppingCartCtrl to use the shopping module created above.

function ShoppingCartCtrl($scope,shopping_cart_operations)  {
 $scope.items = shopping_cart_operations.items;
 $scope.item = {};

 $scope.addItem = function(item) {
  shopping_cart_operations.addItem(item);
  $scope.item = {}; //clear out item object
 };
    
 $scope.totalPrice = shopping_cart_operations.totalPrice;
  
 $scope.removeItem = function(index){
  shopping_cart_operations.removeItem(index);
 };
  
 $scope.mySortFunction = function(item) {
  if(isNaN(item[$scope.sortExpression]))
   return item[$scope.sortExpression];
  return parseInt(item[$scope.sortExpression]);
 }
}

To make the application work as it used to earlier, we need to apply a small change to the HTML. Name of the module has to be assigned to the ng-app directive. Modify the ng-app declaration in the div element to:

<div ng-app="shopping">
....
</div>

Let’s create a simple filter to display price in rupee format and add it to the above module. Following is the code of the filter:

angular.module(‘shopping’,[])
 .value(…)
 .filter(‘rupee’, function(){
  return function(item){
   return "Rs. "+item+".00";
  }
 });

Using this filter is similar to using currency filter.

<td>{{item.Price | rupee}}</td>

This sample is available on jsfiddle:

Happy coding!

Filtering and Sorting data using Angular JS

In last post, we saw how Angular JS helps us in two-way data binding. As I mentioned earlier, Angular JS offers much more than just data binding. We will explore the filtering and sorting features offered by Angular JS.

Angular has a set of filters defined to display data to the user in certain format. We can create our own filters if we are not happy with any of the existing filter. Check Angular’s official developer guide to know more about what filters offer. In this post we will see the usage of some of the built-in filters.

I continue with the same data as I used in the last post. Here is the Angular JS controller with data that we will use in this post. We will add some members to the controller later in the post:

function ShoppingCartCtrl($scope)  {
  $scope.items = [
   {Name: "Soap", Price: "25", Quantity: "10"},
   {Name: "Shaving cream", Price: "50", Quantity: "15"},
   {Name: "Shampoo", Price: "100", Quantity: "5"}
  ];
}

Filtering
Data in an array can be filtered using Angular JS in two ways.

In one approach, we can filter data irrespective of the attributes. The filter is applied across the data in an array. Following markup shows it:

Search: <input type="text" ng-model="searchText" />

<table border="1">
 <thead>
  <tr>
   <th>Name</th>
   <th>Price</th>
   <th>Quantity</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="item in items | filter:searchText">
   <td>{{item.Name}}</td>
   <td>{{item.Price}}</td>
   <td>{{item.Quantity}}</td>
  </tr>
 </tbody>
</table>

 Initially, the table will display all items present in the items array. As we type some text in the text box, data in the array will be filtered based on the entered text and the filtered data will immediately appear on the list.

As you observe, we didn’t ask Angular to filter data based on a property. This is a general filter. It is applied across the properties.

To filter data based on a property, we have to make some changes to the filter specified above. Following markup segment shows how to do it:

Search by any: <input type="text" ng-model="search.$" />

Search by name: <input type="text" ng-model="search.Name" />

<table border="1">
    <thead>
     <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
     </tr>
    </thead>
    <tbody>
     <tr ng-repeat="item in items | filter:search">
      <td>{{item.Name}}</td>
      <td>{{item.Price}}</td>
      <td>{{item.Quantity}}</td>
     </tr>
    </tbody>
   </table>

Text entered in the first text box will be used to filter data irrespective of property; it behaves just as our previous case. But the text entered in the second text box will be used to filter data by name alone.

Since price is a dollar amount, we can display the value with a dollar symbol using currency filter.

<td>{{item.Price | currency}}</td>

Sorting
Data in an array can be sorted based on values of a property. We can do it using the orderBy filter.

Let’s add a drop down list to the above sample and sort data based on the selected property. Following markup demonstrated this:

<div>Sort by: 
        <select ng-model=&quot;sortExpression&quot;>
  <option value="Name">Name</option>
  <option value="Price">Price</option>
  <option value="Quantity">Quantity</option>
 </select>
</div>
<table border="1">
 <thead>
  <tr>
   <th>Name</th>
   <th>Price</th>
   <th>Quantity</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="item in items | orderBy:sortExpression | filter:search">
   <td>{{item.Name}}</td>
   <td>{{item.Price | currency}}</td>
   <td>{{item.Quantity}}</td>
  </tr>
 </tbody>
</table>

As soon as a property is selected from drop-down, you will see the data in the table displayed is sorted according to that property. Observe the sorting pattern of numeric columns (Price and Quantity). They are sorted like strings, not like numbers. This is the default behaviour of the orderBy filter, as mentioned in the documentation.

This behaviour can be overridden by defining a function. If we return value in the form of integer from this function, orderBy filter will apply numeric sorting. Following function can be used to sort string and integer type values. It has to be added to controller:

$scope.mySortFunction = function(item) {
 if(isNaN(item[$scope.sortExpression]))
  return item[$scope.sortExpression];
 return parseInt(item[$scope.sortExpression]);
}

Replace sortExpression of orderBy filter with mySortFunction to sort Price and Quantity as numbers.

<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search">

The mySortFunction checks if the value passed is a number. If it is not a number, it returns the value as is. Otherwise, it parses the value as integer and returns the value.

You can play with the sample on jsfiddle: Happy coding!

Easy two-way data binding in HTML pages with Angular JS

The world is gradually drifting from heavy server logic to heavy client logic for web applications. We see a number of client side libraries being released for different purposes almost every day. These libraries help front-end web developers to make their applications rich.

Most of the times, we spend time in creating data driven applications, such as shopping cart, accounts management, exploring items like books, audio or video. Data binding becomes primary responsibility for a developer working on such applications. To exploit data binding on client side, we have several libraries like Angular, Knockout, Backbone, and Ember to make our work easier. These libraries also help us to write clean JavaScript code using one of MV* patterns.

Lately, I started exploring Angular JS. It is a great library. Though this post explains about data binding, Angular JS is capable of doing a lot more. Following is a list of features supported by Angular JS:

• Data Binding
• Data Templates
• Filtering and Sorting
• Validation
• Support for AJAX
• History
• Routing
• Modular components
• Dependency injection
• Encourages separation and testability

Because of these features, Angular JS makes client side development very easier.

Structure of an application using Angular JS
An application using Angular JS must have following components:

• Reference to Angular JS library
• A JavaScript controller containing data or with logic to fetch data

We have to add the ng-app declaration to a portion of the page that uses features of Angular JS. It can be added to a div inside a page wherein we have to use some expressions of Angular JS. If it is needed for the entire page, we have to add the ng-app declaration to the body tag.

<div ng-app>
 <!-- Your markup goes here -->
</div>

A demo showing some data binding features of Angular JS
Let’s create a shopping cart. We will add the features to calculate total price of the cart, adding items to cart and removing items from cart. We have to add this logic to the controller. An Angular JS controller must follow the following conventions:

• It should be a JavaScript function accepting an argument named $scope
• All of the model variables and functions should be added to the $scope object
• Controllers are usually suffixed with Ctrl, but it is not necessary

Following is the controller with the required functionalities added:

function ShoppingCartCtrl($scope)  {
    $scope.items = [
        {Name: "Soap", Price: "25", Quantity: "10"},
        {Name: "Shaving cream", Price: "50", Quantity: "15"},
        {Name: "Shampoo", Price: "100", Quantity: "5"}
    ];

    $scope.addItem = function(item) {
        $scope.items.push(item);
 $scope.item = {};
    }
    
    $scope.totalPrice = function(){
        var total = 0;
 for(count=0;count<$scope.items.length;count++){
     total += $scope.items[count].Price*$scope.items[count].Quantity;
 }
 return total;
    }
  
    $scope.removeItem = function(index){
        $scope.items.splice(index,1);
    }
}

To bind data using members of the controller, we have to specify the controller using ng-controller directive. Ensure that the element containing ng-controller directive is a child of an element declared as ng-app.

<div ng-app>
 <div ng-controller="ShoppingCartCtrl">
  <!-- Your markup goes here -->
</div>
</div>

Let’s display the items added to items array in a table. Let’s also add a button on each row to remove the item. We have to use the following blocks to achieve this:

• ng-repeat directive to iterate through items
• Binding controller’s properties using {{}}
• ng-click directive to bind button click event
• $index to use current index in an array

Following is the table displaying items:

<table border="1">
    <thead>
 <tr>
  <td>Name</td>
  <td>Price</td>
  <td>Quantity</td>
                <td>Remove Item</td>
 </tr>
    </thead>
    <tbody>
 <tr ng-repeat="item in items">
  <td>{{item.Name}}</td>
  <td>{{item.Price}}</td>
  <td>{{item.Quantity}}</td>
  <td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
 </tr>
    </tbody>
</table>

Let’s display the total price of cart below this table. For this, we need to call the totalPrice() function of controller.

<div>Total Price: {{totalPrice()}}</div>

Finally, let’s add a form to accept values from user and add the new item to items array. We have to use ng-model directive to automatically add an input field to a property of the controller. Following is the form:

<table>
 <tr>
  <td>Name: </td>
  <td><input type="text" ng-model="item.Name" /></td>
 </tr>
 <tr>
  <td>Price: </td>
  <td><input type="text" ng-model="item.Price" /></td>
 </tr>
 <tr>
  <td>Quantity: </td>
  <td><input type="text" ng-model="item.Quantity" /></td>
 </tr>
 <tr>
  <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>
     
 </tr>
</table>

When we enter something in the text boxes, a property named item is automatically added to $scope. This property is used in the addItem function.

You can play with the sample using the following jsfiddle:


Try removing some items from the table and observe that totalPrice is updated immediately. It also happens when an item is added to the array as well.

As we saw, two-way data binding is made very easy using directives and binding syntax of Angular JS. All we need is a controller with some members in it. We don’t need to invoke any special functions to send notification when something changes in the controller. Everything is available for free to us, all we need to do is follow the conventions.

We will explore other features of Angular JS in future posts.

Happy coding!