$ dirty&& $ pristine无法正常工作

时间:2016-11-09 09:20:44

标签: html angularjs input

我正在尝试编写一个代码,只有当输入类型中的文本发生更改或被清除时,控件才会进入代码块。我使用以下条件:

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

在我将其更改为:

之前,这不起作用
 if(!myfrm.textchecker.$dirty && !myfrm.textchecker.$pristine)//completely opposite

以下是我的参考代码:

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

1 个答案:

答案 0 :(得分:2)

要在您的控制器中使用表单的$dirty & $pristine,您必须使用$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>