我正在使用此代码进行密码输入并确认密码输入正确匹配
使用Javascript:
var app = angular.module('app', []);
app.directive('validPasswordC', function() {
return {
require: 'ngModel',
scope: {
reference: '=validPasswordC'
},
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var noMatch = viewValue != scope.reference
ctrl.$setValidity('noMatch', !noMatch)
});
scope.$watch("reference", function(value) {;
ctrl.$setValidity('noMatch', value === ctrl.$viewValue);
});
}
}
});
app.controller('homeCtrl', function($scope) {
$scope.submit= function (form) {
if(form.$valid)
alert('in');
else
alert('out');
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="homeCtrl">
<p>Password:{{formData.password}}</p>
<form name="signupForm" ng-submit="submit(signupForm)">
<div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}">
<label>Password</label>
<input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required />
<p ng-show="signupForm.password.$error.required" class="error">*</p>
<p ng-show="signupForm.password.$error.minlength" class="error">
Passwords must be between 8 and 20 characters.</p>
<p ng-show="signupForm.password.$error.pattern" class="error">
Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div>
<div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}">
<label for="password_c">Confirm Password</label>
<input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required />
<p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span>
<p ng-show="signupForm.password_c.$error.required" class="error">*</p>
</div>
</form>
</div>
</div>
代码工作正常但是当我将表单传递给ng-submit函数时,它总是在确认密码字段中显示无效。我在控制台中检查此表单只确认密码字段有$ valid = false和$ invalid = true。需要帮助这里有什么问题。
这是控制台
答案 0 :(得分:3)
我不明白为什么你使用$parsers
代替$validators
?解析器用于格式化而不是用于验证输入字段!这是我的解决方案:
/**
* Validator for matching two inputs.
* The given attribute is the value to match the own modelValue.
* @example
* <input name="passwordConfirm" type="password" ng-model="passwordConf" validate-match="newPassword">
*/
app.directive('validateMatch', function () {
return {
require: 'ngModel',
scope: {
validateMatch: '='
},
link: function(scope, element, attrs, ngModel) {
scope.$watch('validateMatch', function() {
ngModel.$validate(); // validate again when match value changes
});
ngModel.$validators.match = function(modelValue) {
if (!modelValue || !scope.validateMatch || ngModel.$error.minlength) {
return true;
}
return modelValue === scope.validateMatch;
};
}
};
});
$error
属性的名称为match
而不是noMatch
,因为这会是双重否定。
答案 1 :(得分:1)
您看到的具体错误是因为您正在错误地使用$解析器,您应该使用Betty St的答案中提到的$ validators。
来自角度文档for $Parsers
从解析器返回undefined意味着发生了解析错误。
请注意,你解析为$ parsers的函数没有返回,这意味着它返回undefined,这被解释为解析错误。 (正如$ error对象所示)