Hello, Friends in this tutorial you are going to learn about ng-model directive in Angular.  In our previous session, we have discussed ng-app directive in Angular Js.

Introduction:

Angular Js supports two-way data binding. Two-way data binding means when the model changes the view is automatically changes. This can be achieved using ng-model. ng-model binds the HTML controls data to the application data.

ng-model

The syntax for ng-model directive:

<element ng-mode=”name”></element>

 

Example using ng-model Directive in Angular Js:

<html>
<head>
<title>
ng-model Directive Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
 Name: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.name = "Debug On Web";
});
</script>
</body>

</html>

ng-model provides us many features like:

Two-Way data binding:

ng-model supports bi-directional data binding. This means that any changes made to the model will automatically reflected to application data.

Example:

<html>
<head>
<title>
Two-Way Data Binding
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
 Enter Your Name: <input ng-model="name">
 <h1>Welcome: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.name = "Vinod Palne";
});
</script>

</body>

</html>

2- User Input Validation:

ng-model directive can be used to validate user input such as Number, Email Address, Phone No.

Example

<html>
<head>
<title>
User Input Validation
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body>
<form ng-app="" name="myForm">
 Email:
 <input type="email" name="myAddress" ng-model="text">
 <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

</body>

</html>

Trace Application Status:

ng-model is used to trace  status such as invalid data, dirty read, touched and

Example:

<html>
<head>
<title>
Application Status
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
</head>
<body>

<form ng-app="" name="myForm" ng-init="myText = 'vinodpalne@gmail.com'">

Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>

</form>

</body>

</html>

CSS Classes:

ng-model provides many classes

Example:

<html>
<head>
<title>
CSS Classes
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<style>
input.ng-invalid {
background-color: red;
color:white;
font-weight:bold;
}
</style>
</head>
<body>
<form ng-app="" name="myForm">
Email:
<input type="email" name="myemailAddress" ng-model="text">
<span ng-show="myForm.myemailAddress.$error.email">Not a valid e-mail address</span>
</form>

</body>

</html>

You can download the complete example here.

You must follow the related links:

I hope this article will help you in understanding ng-model in Angular Js.

Thank You.

Leave a Comment