rawatdeepesh rawatdeepesh - 27 days ago 11
AngularJS Question

$dirty && $pristine not working correctly

I am trying to write a code where the control goes into a block of code only when the text in the input type changes or is cleared. I am using the below condition:

if(myfrm.textchecker.$dirty && !myfrm.textchecker.$pristine)


This doesn't work until I change it to :

if(!myfrm.textchecker.$dirty && !myfrm.textchecker.$pristine)//completely opposite


Here is my code for reference :

<html>
<head>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="outerCtrl">
<form name="myfrm">
<input type="password" name="textchecker" ng-change="processed(ngdata)" ng-model="ngdata" required/>

<input type="submit" name="submit" value="submit">
</form>
<span style="color:red" ng-show="myfrm.textchecker.$error.required">please enter the required text</span>

{{ngdata}}
<p>
{{final}}

</p>

<p>
$dirty : {{ myfrm.textchecker.$dirty }} </br>
$invalid : {{myfrm.textchecker.$invalid }}
</br>
$pristine : {{myfrm.textchecker.$pristine }}
</p>

</div>
</body>
</html>
<script>
var app=angular.module("myApp",[]);
app.controller("outerCtrl",function($scope){



$scope.processed=function(password)
{
if(!myfrm.textchecker.$dirty && !myfrm.textchecker.$pristine)
{
console.log('!myfrm.textchecker.$dirty + !myfrm.textchecker.$pristine');

console.log(!myfrm.textchecker.$dirty + !myfrm.textchecker.$pristine);
// var password=$scope.ngdata;
var strength=0;
//console.log(password);
// alert($scope.ngdata);
// if (password.length > 7) strength += 1

//if password contains both lower and uppercase characters, increase strength value
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

//if it has numbers and characters, increase strength value
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 2

//if it has one special character, increase strength value
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 3

//if it has two special characters, increase strength value
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength +=5

//now we ha
if(strength<=2)
{
$scope.final="Poor";
}
else
if(strength>2 && strength<=5)
{
$scope.final="Weak";
}
else
if(strength>5 && strength<=9)
{
$scope.final="Good";
}
if(strength>9)
{
$scope.final="Strong";
}

}

}
});
</script>

Answer

In order to use the $dirty & $pristine of your form in your controller you have to access them with $scope.

if ($scope.myfrm.textchecker.$dirty && !$scope.myfrm.textchecker.$pristine) {

var app = angular.module("myApp", []);
app.controller("outerCtrl", function($scope) {



  $scope.processed = function(password) {
    if ($scope.myfrm.textchecker.$dirty && !$scope.myfrm.textchecker.$pristine) {
      console.log('!myfrm.textchecker.$dirty + !myfrm.textchecker.$pristine');

      console.log(!myfrm.textchecker.$dirty + !myfrm.textchecker.$pristine);
      //  var password=$scope.ngdata;
      var strength = 0;
      //console.log(password);
      // alert($scope.ngdata);
      // if (password.length > 7) strength += 1

      //if password contains both lower and uppercase characters, increase strength value
      if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1

      //if it has numbers and characters, increase strength value
      if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 2

      //if it has one special character, increase strength value
      if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) strength += 3

      //if it has two special characters, increase strength value
      if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 5

      //now we ha
      if (strength <= 2) {
        $scope.final = "Poor";
      } else
      if (strength > 2 && strength <= 5) {
        $scope.final = "Weak";
      } else
      if (strength > 5 && strength <= 9) {
        $scope.final = "Good";
      }
      if (strength > 9) {
        $scope.final = "Strong";
      }

    }

  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="outerCtrl">
    <form name="myfrm">
      <input type="password" name="textchecker" ng-change="processed(ngdata)" ng-model="ngdata" required/>

      <input type="submit" name="submit" value="submit">
    </form>
    <span style="color:red" ng-show="myfrm.textchecker.$error.required">please enter the required text</span>
    {{ngdata}}
    <p>
      {{final}}

    </p>

    <p>
      $dirty : {{ myfrm.textchecker.$dirty }} $invalid : {{myfrm.textchecker.$invalid }} $pristine : {{myfrm.textchecker.$pristine }}
    </p>

  </div>
</body>