Я'м пишу пароль проверьте директиву :
Directives.directive("passwordVerify",function(){
return {
require:"ngModel",
link: function(scope,element,attrs,ctrl){
ctrl.$parsers.unshift(function(viewValue){
var origin = scope.$eval(attrs["passwordVerify"]);
if(origin!==viewValue){
ctrl.$setValidity("passwordVerify",false);
return undefined;
}else{
ctrl.$setValidity("passwordVerify",true);
return viewValue;
}
});
}
};
});
HTML-код :
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<input data-ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
Даны 2 поля для пароля в форме, если оба значения паролей равны, то поле влияет директива действует. Вопрос в том, что он работает в одну сторону (т. е. когда я введите пароль в поле Пароль-проверить поля). Однако, когда исходное поле Пароль обновляется, пароль-проверьте, не'т действовать.
Любая идея, как я могу иметь и"два пути привязки проверить?&и"
Я использую следующую директиву, потому что я хочу, чтобы повторно проверить оба поля ввода, независимо от того, значение 1 или значение 2 был изменен:
директивы:
'use strict';
angular.module('myApp').directive('equals', function() {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function(scope, elem, attrs, ngModel) {
if(!ngModel) return; // do nothing if no ng-model
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function() {
validate();
});
// observe the other value and re-validate on change
attrs.$observe('equals', function (val) {
validate();
});
var validate = function() {
// values
var val1 = ngModel.$viewValue;
var val2 = attrs.equals;
// set validity
ngModel.$setValidity('equals', ! val1 || ! val2 || val1 === val2);
};
}
}
});
использование
<input type="password" ng-model="value1" equals="{{value2}}" required>
<input type="password" ng-model="value2" equals="{{value1}}" required>
Создание отдельной директивы для этого не нужны. Есть уже построить в инструмент угловая проверки пользовательского интерфейса пароль. С этим вы могли бы сделать:
<input name="password" required ng-model="password">
<input name="confirm_password"
ui-validate=" '$value==password' "
ui-validate-watch=" 'password' ">
Passwords match? {{!!form.confirm_password.$error.validator}}
Это должно решить:
Вид:
<div ng-controller='Ctrl'>
<form name='form'>
<input data-ng-model='user.password' type="password" name='password' placeholder='password' required>
<div ng-show="form.password.$error.required">
Field required</div>
<input ng-model='user.password_verify' type="password" name='confirm_password' placeholder='confirm password' required data-password-verify="user.password">
<div ng-show="form.confirm_password.$error.required">
Field required!</div>
<div ng-show="form.confirm_password.$error.passwordVerify">
Fields are not equal!</div>
</form
</div>
Директивы
var app = angular.module('myApp', []);
app.directive("passwordVerify", function() {
return {
require: "ngModel",
scope: {
passwordVerify: '='
},
link: function(scope, element, attrs, ctrl) {
scope.$watch(function() {
var combined;
if (scope.passwordVerify || ctrl.$viewValue) {
combined = scope.passwordVerify + '_' + ctrl.$viewValue;
}
return combined;
}, function(value) {
if (value) {
ctrl.$parsers.unshift(function(viewValue) {
var origin = scope.passwordVerify;
if (origin !== viewValue) {
ctrl.$setValidity("passwordVerify", false);
return undefined;
} else {
ctrl.$setValidity("passwordVerify", true);
return viewValue;
}
});
}
});
}
};
});
Еще один взять на это в соответствии с Модель одно входное значение другого входа.
app.directive('nxEqual', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqual) {
console.error('nxEqual expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqual, function (value) {
model.$setValidity('nxEqual', value === model.$viewValue);
});
model.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.nxEqual);
model.$setValidity('nxEqual', isValid);
return isValid ? value : undefined;
});
}
};
});
Так, если модели в поле пароль логин.пароль можно установить следующие атрибуты на поле проверка: ПХ-равны="от входа.пароль" и
, и тест на имя_формы.elemName.$ошибка.nxEqual
. Вот так:
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqual">Must be equal!</span>
</form>
Расширенная версия:
Для нового проекта я должен был изменить в вышеупомянутой директиве, так что он будет отображать только nxEqual
ошибка только тогда, когда, входного контроля имело значения. В противном случае nxEqual
ошибка должна быть приглушенной. Вот Расширенная версия:
app.directive('nxEqualEx', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, model) {
if (!attrs.nxEqualEx) {
console.error('nxEqualEx expects a model as an argument!');
return;
}
scope.$watch(attrs.nxEqualEx, function (value) {
// Only compare values if the second ctrl has a value.
if (model.$viewValue !== undefined && model.$viewValue !== '') {
model.$setValidity('nxEqualEx', value === model.$viewValue);
}
});
model.$parsers.push(function (value) {
// Mute the nxEqual error if the second ctrl is empty.
if (value === undefined || value === '') {
model.$setValidity('nxEqualEx', true);
return value;
}
var isValid = value === scope.$eval(attrs.nxEqualEx);
model.$setValidity('nxEqualEx', isValid);
return isValid ? value : undefined;
});
}
};
});
И вы будете использовать его вот так:
<form name="form">
<input type="password" ng-model="login.password">
<input type="password" ng-model="login.verify" nx-equal-ex="login.password" name="verify">
<span ng-show="form.verify.$error.nxEqualEx">Must be equal!</span>
</form>
Попробуйте это:
Я сделал это без директивы.
<input type="password" ng-model="user.password" name="uPassword" required placeholder='Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.uPassword.$dirty && form.uPassword.$error.minlength">Too short</span>
<span ng-show="form.uPassword.$dirty && form.uPassword.$error.required">Password required.</span><br />
<input type="password" ng-model="user.confirmpassword" name="ucPassword" required placeholder='Confirm Password' ng-minlength="3" ng-maxlength="15" title="3 to 15 characters" />
<span class="error" ng-show="form.ucPassword.$dirty && form.ucPassword.$error.minlength">Too short</span>
<span ng-show="form.ucPassword.$dirty && form.ucPassword.$error.required">Retype password.</span>
<div ng-show="(form.uPassword.$dirty && form.ucPassword.$dirty) && (user.password != user.confirmpassword)">
<span>Password mismatched</span>
</div>
https://github.com/wongatech/angular-confirm-field хороший проект для этого.
Пример здесь http://wongatech.github.io/angular-confirm-field/
Приведенный ниже код показывает 2 поля ввода с реализованного функционала
<input ng-confirm-field ng-model="emailconfirm" confirm-against="email" name="my-email-confirm"/>
<input ng-model="email" name="my-email" />
В качестве угловых 1.3.0-beta12, недопустимые входы Дон'т писать в ngModel, так что вы можете'т смотреть, а затем проверить, как вы можете видеть здесь: http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview. Была введена новая валидаторы производство и вы можете присоединить к этому, чтобы достичь того же.
Собственно, на этой ноте я'вэ, созданных компонент беседки для общих дополнительных валидаторов: https://github.com/intellix/angular-validators что включает в себя это.
angular.module('validators').directive('equals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('equals', function() {
ngModel.$validate();
});
ngModel.$validators.equals = function(value) {
return value === attrs.equals;
};
}
};
});
angular.module('validators').directive('notEquals', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, elem, attrs, ngModel)
{
if (!ngModel) return;
attrs.$observe('notEquals', function() {
ngModel.$validate();
});
ngModel.$validators.notEquals = function(value) {
return value === attrs.notEquals;
};
}
};
});
Я'вэ использовал эту директиву с успехом до:
.directive('sameAs', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (viewValue === scope[attrs.sameAs]) {
ctrl.$setValidity('sameAs', true);
return viewValue;
} else {
ctrl.$setValidity('sameAs', false);
return undefined;
}
});
}
};
});
Использование ##
<input ... name="password" />
<input type="password" placeholder="Confirm Password"
name="password2" ng-model="password2" ng-minlength="9" same-as='password' required>
Я имел дело с той же проблемой и нашел хороший блог об этом написал Петр Буда. Это'ы хорошо читать и объясняет процесс очень хорошо. Код выглядит следующим образом:
directives.directive("repeatPassword", function() {
return {
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
var otherInput = elem.inheritedData("$formController")[attrs.repeatPassword];
ctrl.$parsers.push(function(value) {
if(value === otherInput.$viewValue) {
ctrl.$setValidity("repeat", true);
return value;
}
ctrl.$setValidity("repeat", false);
});
otherInput.$parsers.push(function(value) {
ctrl.$setValidity("repeat", value === ctrl.$viewValue);
return value;
});
}
};
});
Так что вы могли бы сделать что-то вроде:
<input type="password" name="repeatPassword" id="repeatPassword" placeholder="repeat password" ng-model="user.repeatPassword" repeat-password="password" required>
Заслуга автора
Это не достаточно хорошо:
<input type="password" ng-model="passwd1" />
<input type="password" ng-model="passwd2" />
<label ng-show="passwd1 != passwd2">Passwords do not match...</label>
<button ng-disabled="passwd1 != passwd2">Save</button>
Простой, и работает хорошо для меня.
В целях проверки форма с полем ввода,я нахожу наиболее подходящим способом Директива ##
app.directive('passwordVerify', function() {
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
if (!attrs.passwordVerify) {
return;
}
scope.$watch(attrs.passwordVerify, function (value) {
if( value === ctrl.$viewValue && value !== undefined) {
ctrl.$setValidity('passwordVerify', true);
ctrl.$setValidity("parse",undefined);
}
else {
ctrl.$setValidity('passwordVerify', false);
}
});
ctrl.$parsers.push(function (value) {
var isValid = value === scope.$eval(attrs.passwordVerify);
ctrl.$setValidity('passwordVerify', isValid);
return isValid ? value : undefined;
});
}
};
});
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required || (form.password.$error.minlength || form.password.$error.maxlength)}">
<input type="password" name="password" ng-minlength="6" ng-maxlength="16" id="password" class="form-control" placeholder="Password" ng-model="user.password" required />
<span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
<span ng-show="form.password.$error.minlength || form.password.$error.maxlength" class="help-block">Password must be 6-16 character long</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group" ng-class="{ 'has-error': (form.confirm_password.$dirty && form.confirm_password.$error.required) || form.confirm_password.$error.passwordVerify }">
<input type="password" name="confirm_password" id="confirm_password" class="form-control" placeholder="Confirm Password" ng-model="user.confirm_password" required password-verify="user.password" />
<span ng-show="form.confirm_password.$dirty && form.confirm_password.$error.required" class="help-block">Confirm Password is required</span>
<span ng-show="form.confirm_password.$error.passwordVerify" class="help-block">Please make sure passwords match & must be 6-16 character long</span>
</div>
</div>
</div>
Это решение аналогично приведенному Доминик Уотсон, которая использует $валидаторы и это мне больше всего нравится. Единственные изменения заключаются в том, что вы можете смотреть выражение.
и GT; $валидаторы коллекцию валидаторов, которые применяются всякий раз, когда
модель изменения стоимости. Значение ключа в объект относится к имя валидатора, а функция относится к проверке операции. Операция проверки осуществляется с моделью стоимости В качестве аргумента и возвращать значение true или false в зависимости от В ответ на что проверка
от https://code.angularjs.org/1.3.15/docs/api/ng/type/ngModel.NgModelController
Я'м с помощью угловых 1.3. Моя директива выглядит следующим образом
angular.module('app').directive("passwordConfirm", function() {
"use strict";
return {
require : "ngModel",
restrict : "A",
scope : {
//We will be checking that our input is equals to this expression
passwordConfirm : '&'
},
link : function(scope, element, attrs, ctrl) {
//The actual validation
function passwordConfirmValidator(modelValue, viewValue) {
return modelValue == scope.passwordConfirm();
}
//Register the validaton when this input changes
ctrl.$validators.passwordConfirm = passwordConfirmValidator;
//Also validate when the expression changes
scope.$watch(scope.passwordConfirm, ctrl.$validate);
}
};
});
Чтобы использовать его
<input type="password" ng-model="user.password"/>
<input type="password" ng-model="user.confirmPassword"
password-confirm="user.password" />
Не директивы, решения, но это работает для меня:
<input ng-model='user.password'
type="password"
name='password'
placeholder='password'
required>
<input ng-model='user.password_verify'
type="password"
name='confirm_password'
placeholder='confirm password'
ng-pattern="getPattern()"
required>
И в контроллере:
//Escape the special chars
$scope.getPattern = function(){
return $scope.user.password &&
$scope.user.password.replace(/([.*+?^${}()|\[\]\/\\])/g, '\\$1');
}
Это работает в обе стороны и это простой и чистый
Язык JavaScript
var app = angular.module("app");
app.controller("SamePaswordController", function () {
this.password;
this.confirm;
this.save = function () {
alert("Saved!");
};
}
app.directive("match", function () {
return {
restrict:"A",
require:"ngModel",
link: function(scope, element, attrs, ctrl) {
function matchValidator(value) {
scope.$watch(attrs.match, function(newValue, oldValue) {
var isValid = value === scope.$eval(attrs.match);
ctrl.$setValidity('match', isValid);
});
return value;
}
ctrl.$parsers.push(matchValidator);
}
};
});
HTML-код: обратите внимание на директиву матч
<form name="regForm" ng-controller="SamePaswordController as regCtrl"
ng-submit="regForm.$valid && regCtrl.save()" novalidate>
<input name="password" ng-model="regCtrl.password"
type="password" required placeholder="Password"/>
<input name="confirm" ng-model="regCtrl.confirm" match="regCtrl.password"
type="password" required placeholder="Confirm password"/>
<div> regForm is valid:{{regForm.$valid}}</div>
<input type="submit" value="Save"/>
</form>
Вы можете клонировать РЕПО с этим примером https://github.com/rogithub/roangularjs
Ниже мой взгляд на проблему. Эта директива будет сравниваться значение форма, а не объем.
'use strict';
(function () {
angular.module('....').directive('equals', function ($timeout) {
return {
restrict: 'A',
require: ['^form', 'ngModel'],
scope: false,
link: function ($scope, elem, attrs, controllers) {
var validationKey = 'equals';
var form = controllers[0];
var ngModel = controllers[1];
if (!ngModel) {
return;
}
//run after view has rendered
$timeout(function(){
$scope.$watch(attrs.ngModel, validate);
$scope.$watch(form[attrs.equals], validate);
}, 0);
var validate = function () {
var value1 = ngModel.$viewValue;
var value2 = form[attrs.equals].$viewValue;
var validity = !value1 || !value2 || value1 === value2;
ngModel.$setValidity(validationKey, validity);
form[attrs.equals].$setValidity(validationKey,validity);
};
}
};
});
})();
в HTML теперь относится к форме, а не определенного значения:
<form name="myForm">
<input type="text" name="value1" equals="value2">
<input type="text" name="value2" equals="value1">
<div ng-show="myForm.$invalid">The form is invalid!</div>
</form>
<input name="password" type="text" required="" ng-model="password" placeholder="password" class="ng-dirty ng-valid ng-valid-required">
<input name="confirm_password" type="text" required="" ng-model="confirm_password" ui-validate=" '$value==password' " ui-validate-watch=" 'password' " placeholder="confirm password" class="ng-dirty ng-valid-required ng-invalid ng-invalid-validator">
<span ng-show="form.confirm_password.$error.validator">Passwords do not match!</span>
password errors: {
"required": false,
"validator": true
}
Для добавления большого количества уже существующих решений, это работает хорошо для меня.
(Января Laussmann ответ перестал работать с последним в AngularJS бета-релизы).
директивы:
angular.module('myApp').directive('matchValidator', [function() {
return {
require: 'ngModel',
link: function(scope, elm, attr, ctrl) {
var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator];
ctrl.$parsers.push(function(value) {
if (value === pwdWidget.$viewValue) {
ctrl.$setValidity('match', true);
return value;
}
if (value && pwdWidget.$viewValue) {
ctrl.$setValidity('match', false);
}
});
pwdWidget.$parsers.push(function(value) {
if (value && ctrl.$viewValue) {
ctrl.$setValidity('match', value === ctrl.$viewValue);
}
return value;
});
}
};
}])
использование
<input type="email" ng-model="value1" name="email" required>
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>
ошибка отображения
<div ng-if="[[yourFormName]].emailConfirm.$error">
<div ng-if="[[yourFormName]].emailConfirm.$error.match">
Email addresses don't match.
</div>
</div>
Этот работал для меня.
Директивы:
modulename.directive('passwordCheck', function () {
return {
restrict: 'A', // only activate on element attribute
require: '?ngModel', // get a hold of NgModelController
link: function (scope, elem, attrs, ngModel) {
if (!ngModel) return; // do nothing if no ng-model
var Value = null;
// watch own value and re-validate on change
scope.$watch(attrs.ngModel, function (val) {
Value = val;
validate();
});
// observe the other value and re-validate on change
attrs.$observe('passwordCheck', function () {
validate();
});
var validate = function () {
// values
var val1 = Value;
var val2 = attrs.passwordCheck;
// set validity
if (val1 != '' && val1 != undefined) {
ngModel.$setValidity('passwordCheck', val1 == val2);
}
else {
ngModel.$setValidity('passwordCheck', true);
}
};
}
}
});
HTML-код:
ng-model="confirmpassword.selected" type="password" name="confirmpassword"
password-check="{{password.selected}}"
ng-show="resetpasswordform.confirmpassword.$error.passwordCheck && submitted" Password does not match
У меня была такая же проблема, когда я пытаюсь построить свою собственную директиву, и я исправил это
упр.$проверка();
где Ctrl-это мой ngModelController
это мое мнение
<input type="password" match="signupCtrl.registrationData.password" name="confirmPassword" class="form-control" placeholder="Confirm Password" data-ng-model="signupCtrl.registrationData.confirmPassword" required>
<span ng-messages="registerForm.confirmPassword.$error">
<span ng-message="match">The Password must match</span>
</span>
это моя директива
(function () {
'use strict';
angular.module('matchDirective', [
// Angular modules
// Custom modules
// 3rd Party Modules
]);
})();
(function () {
'use strict';
angular
.module('matchDirective')
.directive('match', match);
match.$inject = ['$window'];
function match($window) {
// Usage:
// <element match="source"></element>
// Creates:
//
var directive = {
link: link,
restrict: 'A',
require: 'ngModel',
};
return directive;
function link(scope, element, attrs, ctrl) {
scope.$watch(attrs['match'], function (newVal, oldVal) {
ctrl.$validators.match = function (modelValue, viewValue) {
if (newVal == modelValue) {
return true;
} else {
return false;
}
}
ctrl.$validate();
});
}
}
})();
Держать его просто и тупо принципе(поцелуй) может быть полезным на этом. Его быстрее и проще, чтобы проверить, если оба пароля совпадают, выполнив следующие действия:
<div ng-app="app" ng-controller="passwordCheck">
<form name="signUp" ng-submit="submitForm()" novalidate>
<input type="password" name="password" ng-model="password" required>
<input type="password" name="ConfirmPassword" ng-model="passwordconfirm" required>
<button type="submit"> Submit</button>
</form>
<hr>
<span>Do they match?</span> {{signUp.password.$viewValue == signUp.confirmPassword.$viewValue}}
</div>
И перед отправкой формы, вы можете сделать это в ваших JS
var app = angular.module("app", []);
app.controller("passwordCheck", function($scope) {
$scope.submitForm = function() {
if ($scope.signUp.$valid && $scope.signUp.password.$viewValue == $scope.signUp.confirmPassword.$viewValue) {
alert('Its a match!');
};
};
});
Вы можете протестировать его в [JSfiddle][1], а также.