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>
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>
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>
OUTPUT:
REFERENCES: ANGUJAR JS API DOCS