AngularJS ngModel Modified Flag
HTML
<div ng-app="application">
<div ng-controller="ApplicationController">
<form name="form" novalidate>
<pre>
Model Value1: "{{ form.fullName.$modelValue }}"
Model Value2: "{{ form.lastname.$modelValue }}"
Valid: {{ form.fullName.$valid ? 'Yes' : 'No' }}
Pristine: {{ form.fullName.$pristine ? 'Yes' : 'No' }}
Master Value: "{{ form.fullName.masterValue }}"
Modified: {{ form.fullName.modified ? 'Yes' : 'No' }}
</pre>
<div class="form-group">
<label for="fullName" class="control-label">Full Name:</label>
<div class="control">
<input
id="fullname"
name="fullName"
class="form-control"
type="text"
placeholder="Full Name"
ng-model="user.fullName"
required
>
</div>
<div class="control">
<input
id="lastname"
name="lastname"
class="form-control"
type="text"
placeholder="last Name"
ng-model="user.lastname"
required
>
</div>
</div>
<div class="buttons">
<h2>Set Initial Value</h2>
<button ng-click="setInitialValue('Jack O\'Neill')">Jack O'Neill</button>
<button ng-click="setInitialValue('John Sheppard')">John Sheppard</button>
<button ng-click="setInitialValue('Everett Young');">Everett Young</button>
<button ng-click="setInitialValue('')">Empty</button>
</div>
<div class="buttons">
<h2>Set Value</h2>
<button ng-click="setValue('Jack O\'Neill')">Jack O'Neill</button>
<button ng-click="setValue('John Sheppard')">John Sheppard</button>
...
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<style>
form {
margin: 50px;
}
input.ng-valid.ng-modified {
border: solid 1px green;
}
input.ng-invalid {
border: solid 1px red;
}
.buttons {
margin: 10px 0;
}
h2 {
font-size: 20px;
}
JavaScript
angular.module('application', [])
.controller('ApplicationController', function($scope) {
$scope.user = {
fullName: 'santosh',
lastname: 'bhosale'
};
$scope.setInitialValue = function(value) {
$scope.user.fullName = value;
$scope.user.lastname = value;
$scope.form.fullName.$setPristine();
$scope.form.lastname.$setPristine();
};
$scope.setValue = function(value) {
document.forms.form.fullName.value = value;
document.forms.form.lastname.value = value;
$scope.form.fullName.$setViewValue(value);
$scope.form.lastname.$setViewValue(value);
};
})
.directive('input', function() {
var modifiedClassName = 'ng-modified';
return {
restrict: 'E',
require: ['?ngModel', '^?form'],
link: function(scope, element, attrs, controllers) {
var ngModel = controllers[0];
var ngForm = controllers[1];
if (null === ngModel || null === ngForm) {
return;
}
var scopePath = ngForm.$name + '["' + ngModel.$name + '"]';
var scopePath = ngForm.$lname + '["' + ngModel.$lname + '"]';
ngModel.modified = false;
ngModel.masterValue = undefined;
var masterListener = function() {
if (ngModel.$pristine) {
ngModel.masterValue = ngModel.$modelValue;
}
};
scope.$watch(scopePath + '.$pristine', masterListener);
scope.$watch(scopePath + '.$modelValue', function() {
masterListener.call(null, arguments);
ngModel.modified = (ngModel.$modelValue...