Learn AngularJS Step by Step– Lab 2(Events and Validations)

Contents

Learn Angularjs Step by Step – Lab 2 (Events and Validations)

Introduction

Step 6:- Creating functions and adding events

Step 7:- Adding HTML validators

Step 8:- Using $valid property of angular

Step 9:- Run the program

Step 10:- Understanding the full code till Lab 2

So what’s next in Lab 3

Introduction

In the previous Learn AngularJS Step by Step(Lab 1) series we saw a simple hello world example and while doing so we learnt the basics of Angular. Let us continue with Lab 2 of Learn AngularJs step by step series and in this Lab we will see how to create events and do validations in AngularJS.

In Lab 1 we executed 5 steps so let us continue in this Lab with step 6.

I would recommend you to go through the below 1 hour Learn Angular youtube video for better and speedy understanding.

Step 6:- Creating functions and adding events

So let us add a simple function “Fun1” to the same “Hello” class we created in Lab 1. “Fun1” function will display whatever data is entered into “txthello” variableusing alert.

function Hello($scope) {
        $scope.txthello = "";
        $scope.Fun1 = function(){
            alert($scope.txthello);
            }
        }
    }

Now if you are thinking that the above method “Fun1()” can be called by simple JavaScript then you are on a very wrong track. Instances created by Angular can only be accessed by angular events. So the below code will not work.

We need to use angular events to make call to the function. So if we want to call “Fun1” of we need to use “ng-click” of Angular.

Once done you should be able to see the click event in action as shown in the below figures.

Below is the complete source code of angular event as described in the above steps.

 

Step 7:- Adding HTML validators

Angular validations use HTML 5 validators internally. So let’s say we want to make sure that “txthello” cannot be null. So we need to apply three steps :-

• Decorate the input type text with HTML validators. For example in the below code we have applied “required” attribute. There are lots of other validators in HTML 5 as well , I would suggest you go through the complete list from this article. In this article we will just use “required” for now.
• The input text which has validators has to be enclosed in a form tag which has to named and also the textbox has to be named. For example we have named the form as “frm1” and textbox as “texthello”. Please note ID does not matter for Angular validation it should have names.
• Now HTML validators are processed by the browsers automatically.When the end users hit submit button they would get errors in the following way in chrome. Now we do not want to use the chrome or IE validation display messages but we want angular to take control.

Below is the code which has the above three steps applied.

Step 8:- Using $valid property of angular

So now we are all set. We have the HTML validators in place. We would like to achieve two things when the end user types data in the input fields:-

• Disable and enable button if there are validation issues.
• Show/Hide error message of the “DIV” tag.

For that we need to use “ng-disabled” and “ng-show” directives of Angular. When any validation fire “$valid” property of angular is evaluated and set to true and false depending on data.Using this property we can enable/disable and show/hide HTML elements.

See the below code where we have set “$valid” to the button for enabling and disabling and to hide/show the “DIV” tag we have used “ng-show”.

Also very closely observe we have negated (“!”) the results.

Step 9:- Run the program

Once all things are done, press control + f5 and enjoy your hardwork. Below is an animated GIF which shows how the program looks like when it’s running.

Step 10:- Understanding the full code till Lab 2

Below is the full code till Lab 2 with basics , events and validation.

So what’s next in Lab 3

In the next lab 3 of Learn AngularJS step by step we will see how to post Angular data to WebAPI.

CodeProject