Angular input value not changed. i.e oldValue == newValue - angularjs

Question

Angular adds 'ng-dirty' class to input field when the input field is modified irrespective of whether newValue==oldValue or not.
i.e. if the input value is 'manohar', and i delete 'r' and add it back. Even though the value is 'manohar'( original value), the 'ng-dirty' class still exists.
Is there a way to check whether the input value is modified or not(newValue != oldValue)?
Thanks in advance.

Answer 1

If you want to handle behavior depending on the actual state of data in a form (edit vs original) you need to keep track of that yourself. Like Cétia sais, dirty/prestine is just to keep track of interaction and validation, not state.
It might be overkill but I usually do something like this:
.controller('MyController', function ($scope, Restangular) {
/**
* #ngdoc property
* #name _dataWatcher
* #private
* #propertyOf MyController
*
* #description
* Holds the watch stop-method, if the "data-has-changed" watcher is active.
*/
var _dataWatcher;
/**
* #ngdoc property
* #name data
* #propertyOf MyController
*
* #description Stores "original" and "edit" copy of the data beeing handled by the form.
*/
$scope.data = {};
/**
* #ngdoc property
* #name data
* #propertyOf MyController
*
* #description Stores state for the view.
*/
$scope.state = {
loading: true,
saving: false,
hasChanged: false,
hasBeenSaved: false
};
/**
* #ngdoc method
* #name _setup
* #private
* #methodOf MyController
*
* #description Run on controller init.
*/
function _setup() {
$scope.reset();
$scope.state.loading = false;
};
/**
* #ngdoc method
* #name _startWatcher
* #private
* #methodOf MyController
*
* #description
* Setup watcher for changes in data.test. Stop method will be saved to
* private property _dataWatcher.
*/
function _startWatcher() {
_dataWatcher = $scope.$watch('data.edit', function (newValue, oldValue) {
if (newValue !== oldValue) {
if (JSON.stringify(newValue) === JSON.stringify($scope.data.original)) {
$scope.state.hasChanged = false;
// If you want the form to act like its untouched if no changes are found:
$scope.nameOfYourForm.$setPristine();
} else {
$scope.state.hasChanged = true;
}
}
}, true);
}
/**
* #ngdoc method
* #name _stopWatcher
* #private
* #methodOf MyController
*
* #description
* Stop watching data.test for changes. This is needed for "reset" and
* syncing data without triggering data-has-changed loop.
*/
function _stopWatcher() {
if (!_dataWatcher) {
return;
}
_dataWatcher();
}
/**
* #ngdoc method
* #name save
* #methodOf MyController
*
* #description
* Save data.edit changes to database, Restangular is used in example but you get the idea.
*/
$scope.save = function () {
var newData;
// Set states
$scope.state.error = false;
$scope.state.saving = true;
// Update with new data
// $scope.entity is a restangularized object from some server
newData = Restangular.copy($scope.entity);
newData.name = $scope.data.edit.name;
newData.status = $scope.data.edit.status;
// Save to db
newData.put().then(function (entity) {
_stopWatcher();
// Db returns saved data, update restangular object, to update
// data in view.
$scope.entity.name = entity.name;
$scope.entity.status = entity.status;
$scope.reset();
$scope.state.hasBeenSaved = true;
}, function (error) {
$scope.state.hasChanged = true;
$scope.state.error = error.data;
}).finally(function () {
$scope.state.saving = false;
});
};
/**
* #ngdoc method
* #name reset
* #methodOf MyController
*
* #description
* Resets the data object to current state of the original source
* object. Any unsaved changes in data.edit will be overwritten.
*/
$scope.reset = function () {
// Stop watcher, if initialized
_stopWatcher();
// Save original data (for comparison)
$scope.data.original = {
status: $scope.feed.status,
name: $scope.feed.name
};
// Create new copy of editable data
$scope.data.edit = angular.copy($scope.data.original);
// Make sure state signals "not changed"
$scope.state.hasChanged = false;
// Force form to be prestine
$scope.nameOfYourForm.$setPristine();
// Start watching changes
_startWatcher();
};
_setup();
});

Answer 2

ngDirty/ngPristine goal is to tell you if the user has modified the form regardless of the values. So in your case the behavior is totally normal.
If you want to modify this behavior, you can use the model.$setPristine() function. More details here : https://code.angularjs.org/1.2.26/docs/api/ng/type/ngModel.NgModelController

Answer 3

You might be interested in this project, called:
angular-forms-enhanced
It modifies $prisitine to be able to do these actions:
Save the original values.
Revert to the original values, and change back to pristine state.
Inform parent forms when child control get back to pristine state