Validations In Angular JS

Angular provided us some of the directives that which will be helpful for the validations over the form while submitting. Not to forgot that, as angular is dealing from the client side it will not fulfill the requirement of validation in the case if user turn off/disable the javascript on the browser where the application is running.

Before going to implementation of the validations, lets go through with the following angular properties which are related to find the sate/behavior of the form.

   a)ng-valid : $valid property states that the validation rules are true over the element. The return type of the $valid is boolean which can be true or false.

b)ng-invalid : $invalid property states that the validation rule over the element are false. Here too the return type of the $invalid is boolean which can be true or false.

c)ng-pristine : $pristine states that fields in the form are not yet modified if the result is true, else viceversa.

d)ng-dirty : $dirty states that some of the fields in the form has been modified if the result is true or else viceversa.

e)ng-submitted : $submitted states that the form was submitted.

Angular also provided us the directives which can be identify the state( likely modified or not) of the input tags.

a)ng-valid : The $valid states that the input field with data is valid.

b)ng-invalid : The $invalid states that the input field with the data was invalid or not met the needs of the field.

c)ng-untouched : The $untouched property states that the concern input field was not touched at all.

d)ng-touched : The $touched property states that the concern input field was disturbed by user inputs.

e)ng-pristine : same as for the form, this states that the field was not yet modified.

f)ng-dirty : similar to the use in form level, here too states that the input field was modified.

In this article lets accomplish the validations based on some of the regular usage of requirements as follows :

a)      Disable submit button until user enter the value in textbox :

<form name="myForm">            

Username:<input type="text" name="user" ng-model="usernm" required> <br /><br />

<button type="submit" ng-disabled="myForm.user.$invalid">Submit</button>          

</form>

Result :

In the above HTML lines if we observe, I had used the ng-disabled directive which is used to disable the tag/element based on the expression provided to it. I had given the expression as the “myform.user.$invalid”, Here “myForm” is name of form. “user” is the name of the input. Make sure to provide the required attribute which belongs to HTML5.

 b)Display message if user disturbs the input text and make empty even though it’s mandatory:

<form name="myForm" >                   

            Username:<input type="text" name="user" ng-model="usernm" required>

                <span style="color: red" ng-show="myForm.user.$dirty">

                <span ng-show="myForm.user.$error.required">Username is required.</span>

                </span><br /><br />  

         <button type="submit" ng-disabled="myForm.user.$invalid">Submit</button>

    </form>

Result :

In the above markup snippet, It shows the span by usinng the ng-show expression. Here the expression “myform.user.$dirty” becomes true if the user disturbs(means like writing text or cleaning the existing text in field) the input field.

In the second span too I had used the ng-show with expression as like “myform.user.$errer.required”, it behaves based on the required attribute of the input tag.

   C)Email Validation :

<form name="myForm" >                   

    Email : <input type="email" id="txtmailid" ng-model="useremail" name="txtmailnm" />

    <span ng-show="myForm.txtmailnm.$touched && myForm.txtmailnm.$error.email">Please enter valid email id.</span><br /><br />

    <button type="submit" ng-disabled="myForm.user.$invalid">Submit</button>   

 </form>

Result :

The error message was binded in the span tag which will be shown based on the the expression provided to it to the attribute ng-show. The condition becomes true when the $touched sets to true(becomes true when user focus the tetbox ) and email input which give to the textbox of type email.

D)Dropdownlist validation :

<form name="myForm" >                   

    <select id="dept" name="depts" ng-model="seldept" required>

        <option value="">--select--</option>

        <option value="1">Developer</option>

        <option value="2">Architect</option>

        <option value="3">Tester</option>

        <option value="4">Desigener</option>       

    </select>

         <button type="submit" ng-disabled="myForm.depts.$invalid">Submit</button>   

 </form>

 Result :

Here too, my button tag will be in disabled mode until it validates the condition “myForm.depts.$invalid” with false. Here, ng-model and required attributes are mandatory to be set the validation, Where ng-model is the angular attribute and the required is the feature of HTML5.

    E)Button disabling if radiobutton not selected :

<form name="myForm" >                   

    Gender:

     <input type="radio" name="gender" ng-model="gen" value="male" required />Male

     <input type="radio" name="gender" ng-model="gen" value="female" required/>Female

     <br />

    <button type="submit" ng-disabled="myForm.gender.$invalid">Submit</button>   

 </form>

Result :

As like above cases here also, we are disabling the button untill the user selects the radiobutton by providing the exression as “myForm.gender.$invalid” . we have to make sure of providing the ng-model attribute for radio type tags.

Generating error message on button click :

This scenario is just like verifying weather our form is valid or not on clicking the submit button.So, provide a name attribute to our form as like below example and check the conditions based on our need. 

<form name="form" ng-app novalidate>

  <div class="form-group">

    <input name="first_name"

          type="text"         

          ng-model="firstnamemodel"          

          required />

  </div>

  <div ng-show="submitted && form.$invalid">

  <div ng-show="form.first_name.$error.required">

    First Name is Required

  </div>

</div>

  <button

    type="submit"   

    ng-click="submitted=true">

      Submit

  </button>

</form>

Result :

In angular we can create our own custom directives which can be used as mark up tag. So, By using the custom directives we can create a tag/attribute of input type which behaves to accept only numbers or alphabets whatever according to our requirement. In my next article I'll discuss about some regularly using custom directives.