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