CODEWITHSUNDEEP
htmlangularjsinput
rawatdeepesh
rawatdeepesh

Reputation: 584

$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>

Upvotes: 1

Views: 1739

Answers (1)

ngCoder
ngCoder

Reputation: 2105

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>

Upvotes: 2

Related Questions