AngularJS ng-model Directive
AngulaJS ng-model Directive bind data with HTML control.HTML control (input,select , textarea) bind with application data by ng-model directive .
You can bind HTML data with a variable also.
Example(Simple example of variable and HTML control data bind)
ng-bing is two way binding .Change in one part of binding (HTMl/Variable) will reflect other part of the binding.
Example( A simple example of two way binding ,Change in one control will reflect the other , with which ,the control is bond with)
AngulaJS has a number of inbuilt directive to validate user data.
ng-model support validation directive to validate data.For example ,you can validate a input ,it is a number format or not.
Example (A simple of validation , if all input are valid,the form will be valid else invalid
AngulaJS also support input data status directive. An input may be of many status , AngularJS inbuilt directive able to check it.Here are the list of status directive.
AngulaJS support CSS for decorating purpose.You can decorate output with CSS class.ng-model also support CSS.
Example ( A Simple example of an input was touched or not)
AngulaJS ng-model Directive bind data with HTML control.HTML control (input,select , textarea) bind with application data by ng-model directive .
You can bind HTML data with a variable also.
Example(Simple example of variable and HTML control data bind)
<!DOCTYPE
>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var
app = angular.module("myApp",
[]);
app.controller('myController',
['$scope',
function
($scope)
{
$scope.name
= 'John';
$scope.Age
= 12;
$scope.Address
= 'Kolkata';
}
]);
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="Address"
/>
</td>
</tr>
</table>
</div>
</div>
Output :
ng-bing is two way binding .Change in one part of binding (HTMl/Variable) will reflect other part of the binding.
Example( A simple example of two way binding ,Change in one control will reflect the other , with which ,the control is bond with)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<script>
var
mypartone = angular.module("myApp",
[]).controller("myController",
function($scope)
{
var
students = {
Name:
"Student1",
Age:
12,
Address:
"kolkata",
};
$scope.student
= students;
});
</script>
<div
ng-app="myApp">
<div
ng-controller="myController">
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
<br
/>
<br
/>
<br
/>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
ng-model="student.Name"
/>
</td>
</tr>
<tr>
<td>
Age
:
</td>
<td>
<input
type="text"
ng-model="student.Age"
/>
</td>
</tr>
<tr>
<td>
Address
:
</td>
<td>
<input
type="text"
ng-model="student.Address"
/>
</td>
</tr>
</table>
</div>
Output :
AngulaJS has a number of inbuilt directive to validate user data.
ng-model support validation directive to validate data.For example ,you can validate a input ,it is a number format or not.
Example (A simple of validation , if all input are valid,the form will be valid else invalid
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
Age
:<input
type="text"
name="age"
required
ng-model="user.age"><br
/>
Address
:<input
type="text"
name="address"
required
ng-model="user.address"><br
/>
</ng-form>
<pre>myForm.$valid:<b>{{myForm.$valid}}</b></pre>
</div>
Example (Example of form validation)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
<table><tr><td>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span
style="color:red"
ng-show="myForm.uname.$error.required
&& myForm.uname.$dirty">Student
Name is required</span>
</td></tr>
<tr><td>
Age
:<input
type="text"
name="age"
required
ng-model="user.age"><br
/>
<span
style="color:red"
ng-show="myForm.age.$error.required
&& myForm.age.$dirty">Student
Age is required</span>
</td></tr>
<tr><td>
Address
:<input
type="text"
name="address"
required
ng-model="user.address"><br
/>
<span
style="color:red"
ng-show="myForm.address.$error.required
&& myForm.address.$dirty">Student
Address is required</span>
</td></tr>
<tr><td>
Email
:<input
type="text"
name="Email"
required
ng-model="user.Email"><br
/>
<span
style="color:red"
ng-show="myForm.Email.$error.required
&& myForm.Email.$dirty">Student
Email is required</span>
</td></tr>
</table>
</ng-form>
<pre>myForm.$valid:<b>{{myForm.$valid}}</b></pre>
</div>
Output :
- ng-untouched : The input not touched till now.
- ng-touched : The input was touched.
- ng-pristine : The input is not modified yet.
- ng-dirty : The input was modified.
- ng-valid : The input data is valid.
- ng-invalid : The input data is not valid.
AngulaJS support CSS for decorating purpose.You can decorate output with CSS class.ng-model also support CSS.
Example ( A Simple example of an input was touched or not)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
novalidate>
Name
:<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span>Input
Was touched :<b>{{myForm.uname.$touched
}}</span>
</ng-form>
</div>
Ouput :
Example (Example of text,number,email,date validation)
<!DOCTYPE
>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<div
ng-app="">
<ng-form
name="myForm"
>
<table>
<tr>
<td>
Name
:
</td>
<td>
<input
type="text"
name="uname"
required
ng-model="user.uname"><br
/>
<span
style="color:red"
ng-show="myForm.uname.$error.required
&& myForm.uname.$dirty">Student
Name is required</span>
</td>
</tr>
<tr>
<td>
Mobile
:
</td>
<td>
<input
type="number"
name="mobile"
required
ng-model="user.mobile">
<span
style="color:red"
ng-show="myForm.mobile.$error.required
&& myForm.mobile.$dirty">Mobile
number is required</span>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input
type="email"
name="email"
required
ng-model="user.email">
<span
style="color:red"
ng-show="myForm.email.$error.required
&& myForm.email.$dirty">Mobile
number is required</span>
</td>
</tr>
<tr>
<td>
Date
of Birth
</td>
<td>
<input
type="date"
name="date"
required
ng-model="user.date"><td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</ng-form>
</div>
Output :
