Why the ng-pristine class in AngularJS form always returns true.
enter a value in the input field and click the button, it does not return false, it returns true.
test.html
<div ng-app="myModule">
<div ng-controller="myController">
<form name="myForm" ng-submit="su()">
<input name="input1" type="text">
<button id="button1" type="submit" >>>>>></button>
</form>
myForm.$pristine : {{results}}
</div>
</div>
test.js
var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.su = su;
$scope.results = "default";
function su()
{
$scope.results = $scope.myForm.$pristine;
}
});
We need to add the ng-model
attribute to the form elements, so that pristine and dirty are updated, after this it's working fine.
Pristine is defined as below
The ng-pristine class tells that the form has not been modified by the user. This returns true if the form has not been modified by the user. Return type: Return Boolean True if the form/input field is not modified by the user else it returns False.
Working example below:
var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
$scope.su = su;
$scope.results = "default";
function su()
{
$scope.results = $scope.myForm.$pristine;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="myModule">
<div ng-controller="myController">
<form name="myForm" ng-submit="su()">
<input name="input1" type="text" ng-model="input1">
<div class="info" ng-show="myForm.input1.$pristine">
Now Pristine
</div>
<div class="error" ng-show="myForm.input1.$dirty">
Now Dirty
</div>
<button id="button1" type="submit" >>>>>></button>
</form>
myForm.$pristine : {{myForm.$pristine}}
</div>
</div>