Click here to Skip to main content
13,900,044 members
Click here to Skip to main content
Add your own
alternative version

Stats

13.1K views
7 bookmarked
Posted 13 Feb 2016
Licenced CPOL

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

, 13 Feb 2016
Rate this:
Please Sign up or sign in to vote.
Learn AngularJS Step by Step – Lab 2 (Events and Validations)

Contents

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” variable using 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.

<input type="button" onclick="Fun1()" name="name" value="Alert" />

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

<input type="button" ng-click="Fun1()" name="name" value="Alert" />

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:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script src="Scripts/angular.js"></script>
<script>
    function Hello($scope) {
        $scope.txthello = "";
        $scope.Fun1 = function(){
            alert($scope.txthello);
            }
        }
    }
    var myApp = angular.module("myApp", []);
    myApp.controller("HelloWorld", Hello);
</script>
</script>
<body ng-app="myApp">
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<input type="button" ng-click="Fun1()" name="name" value="Alert" /><br /><br />
<div id="div1">{{txthello}}</div>
</div>
</body>
</html>

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 Internet Explorer validation display messages, but we want angular to take control.

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

<form name="frm1" novalidate>
<input name="texthello"ng-model="txthello" id="txthello" type="text" required />
</form>

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 fires, “$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.

<input type="button" name="name" value="Alert" ng-disabled="!(frm1.$valid)"/>
<div ng-show="!(frm1.texthello.$valid)"> Text is required</div>

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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script src="angular.js"></script>
<script>
    function Hello($scope) {
        $scope.txthello = "";
        $scope.Fun1 = function() {
            {
                alert($scope.txthello);

            }

        }
    }
    var myApp = angular.module("myApp", []);
    myApp.controller("HelloWorld", Hello);
</script>
<body ng-app="myApp">

<div id=" HelloWorldScreen" ng-controller="HelloWorld">

<form name="frm1" id="frm1" novalidate>

<input name="texthello" ng-model="txthello" id="txthello" type="text" required /><br />
<div ng-show="!(frm1.texthello.$valid)"> Text is required</div>
<br />
<input type="button" ng-click="Fun1()" name="name" value="Alert" ng-disabled="!(frm1.$valid)"/><br /><br />
</form>
<div id="div1">{{txthello}}</div>
</div>

</body>
</html>

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


You may also be interested in...

Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web04 | 2.8.190306.1 | Last Updated 13 Feb 2016
Article Copyright 2016 by Shivprasad koirala
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid