0
Hier bin ich mit dem Problem in Bezug auf unten angegebenen dritten Punkt konfrontiert (wenn Benutzer Passwort ändert Wert).AngularJS Bestätigung Passwort Validierungen
- Testszenario:
- Benutzer gibt alle Felder richtig - [
Button Enabled] - wenn Passwort-Feld ungültig ist, da es nicht die Stärke von Passwörtern nicht erfüllt dann die
create an accountTaste im Sperrmodus. - Wenn Benutzer den Kennwortwert ändert, aber das Kennwortfeld gültig ist. EX: [
[email protected]bis[email protected]] Hier ist der Bestätigungsfeldwert[email protected]. Die Schaltfläche sollte sich dann im Deaktivierungsmodus befinden.
- Benutzer gibt alle Felder richtig - [
Ich habe durch den Zugriff auf Parent Scope, getestet Scope Werte zwischen zwei Richtlinien wie diese.
function okPasswordDirective() {
$element.on('blur change keydown', function(evt) {
if(ngPasswordModel.$valid) {
$scope.passwordVal = ngPasswordModel.$viewValue;
console.log('Updated Val : ', $scope.passwordVal);
$scope.updatePass();
}
}
}
function compareToDirective() {
//use scope.$parent to associate the function called to directive function
scope.$parent.updatePass = function() {
console.log('$watch « Password Element Watcher.')
console.log('Pswd: ',scope.$parent.passwordVal, '\t Cnfirm:', ngModel.$modelValue);
//scope.registerForm.confirm.$invalid = true;
}
}
Hier in updatePass() function iam nicht lastcommited Wert Passwort erhalten. Wenn ich auf Bestätigungsfeld klicke, bekam ich es. aber keine Verwendung, ich kann die Taste nicht deaktivieren, indem Sie confirm field as invalid machen.
var pswd = angular.element(document.getElementById('password')).scope().registerForm.password;
var cnfm = angular.element(document.getElementById('confirmedID')).scope().registerForm.confirm;
console.log('PSWD:', pswd, '\n CNFM:', cnfm);
console.log('Diff : ', pswd.$viewValue != cnfm.$viewValue);
if(pswd.$viewValue != cnfm.$viewValue) {
console.log('Result : ', (pswd.$dirty && cnfm.$dirty && cnfm.$valid && (pswd.$viewValue != cnfm.$viewValue)) ? 'error' : 'noErr');
cnfm.$invalid = true;
}
Anmeldeformular Code: fiddle
<!-- HTML CODE -->
<body ng-app="loginModule">
<div class="main-container">
<div class="form-container">
<h2 class="form-label">Sign Up</h2>
<div class="form-container" data-ng-controller="registerController" >
<form name="registerForm" role="form" data-ng-submit="formSubmit()">
<div class="form-group"><!-- Display Name -->
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6 left">
<div class="error form-hint"
data-ng-show="registerForm.firstname.$dirty && registerForm.firstname.$error.required"
data-ng-cloak>{{"This field is required."}}
</div>
<input type="text" class="form-control" name="firstname" placeholder="First name"
data-ng-class="(registerForm.firstname.$dirty && registerForm.firstname.$invalid) ? 'error' : ''"
data-ng-required="true" data-ng-model="firstName">
</div>
<div class="col-md-6 col-sm-6 col-xs-6 right">
<div class="error form-hint"
data-ng-show="registerForm.lastname.$dirty && registerForm.lastname.$error.required"
data-ng-cloak>{{"This field is required."}}
</div>
<input type="text" class="form-control" name="lastname" placeholder="Last name"
data-ng-class="(registerForm.lastname.$dirty && registerForm.lastname.$invalid) ? 'error' : ''"
data-ng-required="true" data-ng-model="lastName">
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="error form-hint"
data-ng-show="registerForm.username.$dirty && registerForm.username.$error.required"
data-ng-cloak>{{"This field is required."}}
</div>
<input type="text" class="form-control" id="userid" name="username" placeholder="User name"
data-ng-class="(registerForm.username.$dirty && registerForm.username.$invalid) ? 'error' : ''"
data-ng-required="true" data-ng-model="username">
</div>
<div class="form-group">
<div class="error form-hint"
data-ng-show="registerForm.email.$dirty && registerForm.email.$error.required"
data-ng-cloak>{{"You can't leave this empty."}}
</div>
<div class="error form-hint"
data-ng-show="registerForm.email.$dirty && registerForm.email.$error.email"
data-ng-cloak>{{"The email address you provided isn't valid"}}</div>
<input type="email" class="form-control" id="emailid" name="email" placeholder="Email address"
data-ng-class="(registerForm.email.$dirty && registerForm.email.$invalid) ? 'error' : ''"
data-ng-required="true" data-ng-model="email77">
</div>
<div class="form-group">
<div class="form-hint">
To conform with our Strong Password policy,
Use at least one letter, one numeral, one special character, and seven characters.
</div>
<input type="text" class="form-control" data-ok-password-directive
id="password" name="password" placeholder="Password" data-ng-required="true"
data-ng-class="(registerForm.password.$dirty && registerForm.confirm.$dirty
&& registerForm.confirm.$valid &&
(registerForm.password.$viewValue != registerForm.confirm.$viewValue)) ? 'error' : ''"
data-ng-model="passwordModel">
<div class="label password-count"
data-ng-class="passwordModel.length > 7 ? 'label-success' : 'label-danger'"
data-ng-cloak>{{ passwordModel | passwordCountFilter }}</div>
<div class="strength-meter">
<div class="strength-meter-fill" data-strength="{{myModulePasswordMeter}}"></div>
</div>
</div>
<div class="form-group">
<div class="error form-hint"
data-ng-show="registerForm.confirm.$dirty && !registerForm.confirm.$empty && registerForm.confirm.$error.required"
data-ng-cloak>{{"You can't leave this empty."}}
</div>
<div class="error form-hint"
data-ng-show="registerForm.confirm.$dirty && registerForm.confirm.$invalid && !registerForm.confirm.$error.required"
data-ng-cloak>{{"These passwords don't match. Try again?"}}</div>
<div class="error form-hint" data-ng-show="
(registerForm.confirm.$dirty && registerForm.confirm.$valid && !registerForm.confirm.$invalid) &&
(registerForm.password.$modelValue != registerForm.confirm.$modelValue)" data-ng-cloak>
{{'Password mismatch'}}
</div>
<!-- Enter to Confirm password | Enter for Password confirmation -->
<input type="text" class="form-control" id="confirmedID" name="confirm"
placeholder="Password confirmation"
data-ng-required="true" data-ng-model="confirm77"
data-ng-class="(registerForm.confirm.$dirty &&
(registerForm.confirm.$invalid ||
(registerForm.password.$modelValue != registerForm.confirm.$modelValue))) ? 'error' : ''"
data-compare-to="registerForm.password" >
</div>
<button id="siginButton" type="submit" class="btn" data-ng-disabled="registerForm.$invalid">Create an account</button>
</form>
</div>
</div>
</div>
</body>
Script-Code:
(function() {
var loginModule = angular.module('loginModule', []);
loginModule.constant('USERCONSTANTS', (function() {
return {
PASSWORD_LENGTH: 7
}
})());
loginModule.controller('registerController', ['$scope','$http', '$window', '$location', registerControllerFun]);
function registerControllerFun($scope, $http, $window, $location) {
console.log(' registerControllerFun...');
}
loginModule.factory('myfactory', [function() {
return {
score: function() {
//console.log('arguments List : ', arguments);
var score = 0, value = arguments[0], passwordLength = arguments[1];
var containsLetter = /[a-zA-Z]/.test(value), containsDigit = /\d/.test(value), containsSpecial = /[^a-zA-Z\d]/.test(value);
var containsAll = containsLetter && containsDigit && containsSpecial;
console.log(" containsLetter - ", containsLetter,
" : containsDigit - ", containsDigit,
" : containsSpecial - ", containsSpecial);
if(value.length == 0) {
score = 0;
} else {
if(containsAll) {
score += 3;
} else {
if(containsLetter) score += 1;
if(containsDigit) score += 1;
if(containsSpecial) score += 1;
}
if(value.length >= passwordLength) score += 1;
}
/*console.log('Factory Arguments : ', value, " « Score : ", score);*/
return score;
}
};
}]);
loginModule.directive('okPasswordDirective', ['myfactory', 'USERCONSTANTS', function(myfactory, USERCONSTANTS) {
return {
restrict: 'AC',
// use the NgModelController
require: 'ngModel',
// add the NgModelController as a dependency to your link function
link: function($scope, $element, $attrs, ngPasswordModel) {
console.log('Directive - USERCONSTANTS.PASSWORD_LENGTH : ', USERCONSTANTS.PASSWORD_LENGTH);
$element.on('blur change keydown', function(evt) {
$scope.$evalAsync(function($scope) {
var pwd = $scope.password = $element.val();
$scope.myModulePasswordMeter = pwd ? (pwd.length > USERCONSTANTS.PASSWORD_LENGTH
&& myfactory.score(pwd, USERCONSTANTS.PASSWORD_LENGTH) || 0) : null;
ngPasswordModel.$setValidity('okPasswordController', $scope.myModulePasswordMeter > 3);
});
if(ngPasswordModel.$valid) {
$scope.passwordVal = ngPasswordModel.$viewValue;
console.log('Updated Val : ', $scope.passwordVal);
$scope.updatePass();
}
});
}
};
}]);
loginModule.filter('passwordCountFilter', [ function() {
var passwordLengthDefault = 7;
return function(passwordModelVal) {
passwordModelVal = angular.isString(passwordModelVal) ? passwordModelVal : '';
var retrunVal = passwordModelVal &&
(passwordModelVal.length > passwordLengthDefault ? passwordLengthDefault + '+' : passwordModelVal.length);
return retrunVal;
};
} ]);
var compareTo = function() {
return {
require: "ngModel",
// directive defines an isolate scope property (using the = mode) two-way data-binding
scope: {
passwordEleWatcher: "=compareTo"
},
link: function(scope, element, attributes, ngModel) {
console.log('Confirm Password Link Function call.');
var pswd = scope.passwordEleWatcher;
ngModel.$validators.compareTo = function(compareTo_ModelValue) {
//console.log('scope:',scope);
if((pswd != 'undefined' && pswd.$$rawModelValue != 'undefined') && (pswd.$valid && pswd.$touched)) {
var pswdModelValue = pswd.$modelValue;
var isVlauesEqual = ngModel.$viewValue == pswdModelValue;
return isVlauesEqual;
} else {
console.log('Please enter valid password, before conforming the password.');
return false;
}
};
scope.$watch("passwordEleWatcher", function() {
console.log('$watch « Confirm-Password Element Watcher.')
ngModel.$validate();
});
scope.$parent.updatePass = function() {
console.log('$watch « Password Element Watcher.')
console.log('Pswd: ',scope.$parent.passwordVal, '\t Cnfirm:', ngModel.$modelValue);
//scope.registerForm.confirm.$invalid = true;
}
},
};
};
loginModule.directive("compareTo", compareTo);
})(window.angular);
Jede Hilfe geschätzt wird.
CSS classes Beobachtet:
ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required form-control ng-isolate-scope ng-invalid-compare-to
ng-pristine ng-touched ng-empty ng-invalid ng-invalid-required form-control ng-isolate-scope ng-invalid-compare-to
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-invalid ng-valid-required error form-control ng-isolate-scope ng-invalid-compare-to
ng-dirty ng-valid-parse ng-touched ng-empty ng-invalid ng-valid-required error form-control ng-isolate-scope ng-invalid-compare-to
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required form-control ng-isolate-scope ng-valid-compare-to
Ich möchte nur von ng-valid CSS-Wert ändern hinzugefügt ng-invalid
ngModel $ viewValue === pswdModelValue; Diese kleine Änderung könnte Ihnen die Lösung bringen, eine strikte Validierung ist erforderlich, ich denke, verwenden Sie "===" (typsichere Gleichheitsoperatoren) statt "==" (reguläre Gegenstücke) –
Sorry, hier ist das Problem nicht mit der Operator. Das Problem ist, dass ich den update-Wert nicht auf "updatePass() function" setzen kann, nachdem ich auf das Bestätigungsfeld iam geklickt habe und den aktualisierten Wert erhalten habe. – Yash