AngularJS ng-Model Directive

Post Views: 166

AngularJS Directive ng-Model:

The ng-Model directive binds an input,select, textarea or a custom form control to a model object (using variable name declared during HTML control declaration) in the application.

ng-Model binds HTML view to the model variables.
It provides validation behavior (i.e. required, number, email, url, regex).
It set css classes of an element (ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty, ng-not-empty), which we can use for validation also.
It is responsible for two-way bindings (any changes on the View will also change value of a variable in the Model).
It binds the HTML control by using variable name specified during HTML tag declaration. Example: <input ng-model='firstName'/>
If the variable name is not declared in the scope, it will create variable property implicitly during runtime and add to the scope.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="myApp">

<div ng-controller='myController'>
<p> City name: <input type="text" ng-model="cityName"/></p>
<p> Country name: <input type="text" ng-model="countryName"/></p><p>{{cityName}}</p>
<p ng-bind='countryName'></p>
</div>

<script>
var app = angular.module("myApp",[]).controller("myController", function ($scope){
$scope.cityName = 'Madrid';
});

</script>
</body>
</html>

VIEW DEMO

OUTPUT:

When we run this script, cityName property will be set to “Madrid”. CountryName will be added at runtime in the scope using ng-Model directive.

Two-way Data Binding:

ng-Model is responsible for keeping data in sync between the view and its model. This helps in two-way data binding. In the above example we change the City name, this will be changed in the Model almost immediately and also update on the expression {{city}}.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>

<body ng-app="myApp">

<div ng-controller='myController'>
<p> City name: <input type="text" ng-model="cityName"/></p>
<p> Country name: <input type="text" ng-model="countryName"/></p><p>{{cityName}}</p>
<p ng-bind='countryName'></p>
</div>

<script>
var app = angular.module("myApp",[]).controller("myController", function ($scope){
$scope.cityName = 'Madrid';
});

</script>
</body>
</html>

VIEW DEMO

OUTPUT:

Validate inputs using ng-model directive:

ng-model directive also provides validation attributes to identity if an element is in valid state or not (example: email address, number). We can use attributes like ng-valid, ng-invalid, ng-dirty, ng-pristine, ng-touched, ng-untouched for this purpose.

Example:

<html>
<head>
<title>AngularJS - Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<style>
body
{
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f7f7f7;
}
.error
{
color:red;
}
</style>
</head>
<body ng-app>
<form name="form1">
<div>

<p>Enter name: <input type="text" name="firstName" ng-model="name" required/></p>
{{form1.firstName.$valid}}

<p>Enter Email Address: <input type="email" name="email" ng-model="email1" />
<span ng-if="!form1.email.$valid" class="error">Please enter a valid Email Address</span></p>

<p>Is Email Pristine: {{form1.email.$pristine}}</p>
<p>Is Email valid: {{form1.email.$valid}}</p>
<p>Is Email dirty: {{form1.email.$dirty}}</p>
<p>Is Email Touched: {{form1.email.$touched}}</p>
<p>Is Email Un-touched: {{form1.email.$untouched}}</p>

</div>
</form>
</body>
</html>

VIEW DEMO

OUTPUT: