Form Debugging With AngularJS Batarang

Form #Debugging With #AngularJS Batarang via @CsharpCorner  #Angular #Angular2

  • Angular Batarang is a tool for watching the scope of Angularjs (Angular1.x) Applications .
  • I highly recommend you use Batarang for watch scope and form validation status.
  • Figure 3: Watch Scope

    Major advantage of Batarang is you can view the form validation status.

  • Batarang shows a clear picture of your application from root scope to every single model value.
  • For Mozilla, Firefox lovers cannot use Angular Batarang but some 3rd party (AngScope) add-ons are available to inspect the scope of AngularJS Application.

This blog helps you to understand form debugging with AngularJS Batarang.

@CsharpCorner: Form #Debugging With #AngularJS Batarang via @CsharpCorner #Angular #Angular2

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

It has three major parts, which are given below.

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

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. 

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.

Figure 4: over All Errors

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

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.

According to my knowledge, Batarang contains some small issues.

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.

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

Form Debugging With AngularJS Batarang

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.