Form Debugging With AngularJS Batarang

Introduction

Angular Batarang is a tool for watching the scope of Angularjs (Angular1.x) Applications .Batarang is a Chrome extension and you can download this extension from Chrome Web store. Your Angular Application contain lots of forms. I highly recommend you use Batarang for watch scope and form validation status.

Generally, Batarang means a roughly bat-shaped throwing weapon, which is used by DC Comics vigilante Batman. I hope this Angular Batarang is that kind of tool to make your debugging very easy.


Figure 1: Download Page

Structure of Batarang

It has three major parts, which are given below.

1. Scope
   This is the main part of the tool. We can watch live an entire app scope (root and local scope). View form, input fields status.
   
   
2. Hints
   It gives some tips to improve Angular Application. It shows warning message of controller and events error.
   
   
3. Performance
   It is a beta version. We are able to audit Angular model. Watch digest cycles, monitor memory usages and time consumption of the events.
   
   
   Figure 2: Structure of Batarang

Watch scope

In Angular Batarang, we can view the dynamic scope update. If the field input is changed or any JavaScript events changes the model value, we can see these changes in scope tab.


Figure 3: Watch Scope

Form Debugging

Major advantage of Batarang is you can view the form validation status. Whole form and fields are shown as the objects and their properties. It must put the name attribute in form and fields (input, select, textarea) tag. 

<form class="form-horizontal " name="Signupform" ng-submit="SignUp()" novalidate>
   <!-- form fileds -->
   <input class="form-control" type="text" ng-model="firstName" name="firstname" required/>
</form>

For example, above form appears in scope tab as ‘signupform’ object. This object contains the properties of the form field (firstname). We expand the properties of the objects, it contains fields status ($modelValue, $untouched, $error, $valid etc).

Inside every input field and form object, we can see the properties given below.

• $error
  $error is an object, which contains error properties (required Email, max and min) of every fields and form.
  
  
• $modelValue, $ViewValue represents the current value of the input fields.
• $untouched, $vaild, $inValid, $pristine, $dirty is the current status of form and fields.

Figure 4: over All Errors

Here, the sample code for signup form with validation message is given below to get the person's details.  

<div ng-app="myApp">
<div ng-controller="SignUpCtrl">
<form  class="form-horizontal " name="form"  ng-submit="SignUp()" novalidate>
    <div class="form-group row" >
      <div class="col-lg-6 col-md-6 col-xs-12">
    <label class=" control-label"> Name: </label>
    <input class="form-control" type="text" ng-model="person.Name" name="firstName" id="formGroupInputLarge" required/>
    <span class="help-inline has-warning" ng-show="submitted && form.firstName.$invalid">Required</span>
         </div>

       <div class="col-lg-6 col-md-6 col-xs-12">
    <label class=" control-label">Gender: </label>
    <select class="form-control" name="type" ng-model="person.gender" required>
    <option value="Male">Male</option>
    <option value="Female">Female</option>
    </select>
    <span class="help-inline" ng-show="submitted && form.type.$error.required">Required</span>
    </div>
  </div>

     <div class="form-group row" >
      <div class="col-lg-6 col-md-6 col-xs-12">
    <label class=" control-label">Email :</label>
     <input class="form-control" type="email" name="email" ng-model="person.email" required/>
     <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>  <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>

       <div class="col-lg-6 col-md-6 col-xs-12">
    <label class=" control-label">Mobile: </label>
    <input class="form-control" type="number" ng-model="person.phoneNumber" name="phoneNumber" ng-maxlength="10" ng-minlength="10"  id="inputError" required/>
    <span class="help-inline" ng-show="submitted && form.phoneNumber.$error.required">Required</span>
    <span class="help-inline" ng-show="submitted && form.phoneNumber.$error.minlength">Number not less then 10 digit</span>
    <span class="help-inline" ng-show="submitted && form.phoneNumber.$error.maxlength">Number is not more then 10 digit</span>
    </div></div>

     <button type="submit" class="btn btn-primary col-md-offset-5" ng-click="submitted=true">submit</button>

</form>
</div></div>

The same Scope options are also available in an element tab. Just pick elements in screen and click $scope tab in the right corner of debugger screen.

Figure 5: Scope in Elements tab

Issues and bugs

According to my knowledge, Batarang contains some small issues.

• If Field contains date calendars are not shown in scope. The date object simply shows an empty object.
• In Modals screen we are not able to collapse the objects. If you expand any object, it cannot minimize that object. It does not respond when you click down arrow button.

Summary

Angular Batarang is a super heroic tool for debugging Angular Applications. It saves lot of time from setting breakpoint, viewing modal values and forming status in console. Batarang shows a clear picture of your application from root scope to every single model value.

Tips

For Mozilla, Firefox lovers cannot use Angular Batarang but some 3rd party (AngScope) add-ons are available to inspect the scope of AngularJS Application.

Angury is a same like as Batarang tool for debugging Angular2 Application. Download Link.