반응형
angularjs의 비밀번호 확인 지시문
암호 확인 지시문을 작성 중입니다.
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">
양식에 두 개의 비밀번호 필드가 주어지면 두 비밀번호 값이 모두 같으면 지시문의 영향을받는 필드가 유효합니다. 문제는 한 가지 방식으로 작동한다는 것입니다 (예 : 암호 확인 필드에 암호를 입력 할 때). 그러나 원래 암호 필드가 업데이트되면 암호 확인이 유효하지 않습니다.
"양방향 바인딩 확인"을 어떻게 할 수 있는지 아십니까?
이것은 그것을 해결해야합니다.
전망:
<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;
}
});
}
});
}
};
});
값 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>
이를 위해 별도의 지시문을 만들 필요가 없습니다. Angular UI 암호 유효성 검사 도구에 이미 빌드가 있습니다. 이를 통해 다음을 수행 할 수 있습니다.
<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}}
이것에 대한 또 다른 취지는 한 입력의 모델을 다른 입력의 값과 일치시키는 것입니다.
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;
});
}
};
});
암호 상자의 모델 인 경우 그래서, login.password: 당신은 다음과 같은 검증 상자의 속성 설정 nx-equal="login.password"에 대한 테스트를 formName.elemName.$error.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>
시도해보세요 : http://jsfiddle.net/gUSZS/
나는 지시없이 그것을했다.
<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" />
angular 1.3.0-beta12부터 유효하지 않은 입력은 ngModel에 쓰지 않으므로 여기에서 볼 수있는 것처럼 볼 수없고 유효성을 검사 할 수 있습니다 : http://plnkr.co/edit/W6AFHF308nyKVMQ9vomw?p=preview . 새로운 유효성 검사기 파이프 라인이 도입되었으며 여기에 연결하여 동일한 작업을 수행 할 수 있습니다.
사실, 그 메모에서 나는 이것을 포함하는 일반적인 추가 검증 인 https://github.com/intellix/angular-validators 를 위한 bower 컴포넌트를 만들었습니다 .
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>
나는 같은 문제를 다루고 있었고 Piotr Buda가 작성한 좋은 블로그 게시물을 찾았습니다 . 좋은 읽기이며 프로세스를 매우 잘 설명합니다. 코드는 다음과 같습니다.
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>
간단하고 잘 작동합니다.
이 솔루션은 $ validator를 사용하는 Dominic Watson이 제공 한 솔루션과 유사하며 제가 가장 좋아하는 솔루션입니다. 유일한 변화는 표현을 볼 수 있다는 것입니다.
$ validators 모델 값이 변경 될 때마다 적용되는 유효성 검사기 모음입니다. 객체 내의 키 값은 유효성 검사기의 이름을 참조하고 함수는 유효성 검사 작업을 참조합니다. 유효성 검사 작업은 인수로 모델 값과 함께 제공되며 해당 유효성 검사의 응답에 따라 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" />
두 개의 입력 필드로 양식을 검증하기 위해 가장 적합한 방법을 찾습니다.
지령
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;
});
}
};
});
HTML
<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>
이것은 두 가지 방식으로 작동하며 간단하고 깨끗합니다.
자바 스크립트
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 : match 지시문을 참고하세요.
<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로 저장소를 복제 할 수 있습니다.
지시적인 해결책은 아니지만 나를 위해 일하고 있습니다.
<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');
}
http://plnkr.co/edit/QDTnipCsHdg56vgygsqC?p=preview
다음은 문제에 대한 나의 견해입니다. 이 지시문은 범위 대신 양식 값과 비교됩니다.
'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>
두 입력이 모두 변경 될 때 유효성 검사를 수행하기 위해 다음 코드를 사용합니다 (다른 모든 답변의 조합).
angular.module('app.directives')
.directive('passwordVerify', [function () {
return {
require: '?ngModel',
restrict: 'A',
scope: {
origin: '=passwordVerify'
},
link: function (scope, element, attrs, ctrl) {
if(!ctrl) {
return;
}
function validate(value) {
ctrl.$setValidity('passwordMatch', scope.origin === value);
return value;
}
ctrl.$parsers.unshift(validate);
scope.$watch('origin', function(value) {
validate(ctrl.$viewValue);
});
}
};
}]);
먼저이 훌륭한 예를 게시 해 주신 Fredric에게 감사드립니다. 우연히 만난 작은 문제가 하나 있습니다. Fiddle에 http://jsfiddle.net/gUSZS/ 게시했습니다.
암호를 입력 한 다음 확인 입력 요소에 동일한 암호를 입력하면 모든 것이 정상적으로 작동하지만 두 번째 상자에 공백을 추가하면 각도가 자동으로 해당 공간을 자릅니다. 이는 지시문이 추가 공간을 "보지"않음을 의미합니다. 이제 암호는 다르지만 양식은 여전히 유효합니다.
이 문제를 해결하려면 추가해야합니다.
ng-trim="false"
입력 요소에. 이것은 angular 1.0.3에서 작동하지 않으므로이 바이올린에서 시도하려면 1.1.1을 Fiddle에 추가해야합니다 ( http://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular .js )
하지만 Frederic에게 고맙습니다. 내 앱에서 귀하의 솔루션을 사용할 것입니다!
Anton PS 저는 Frederic의 게시물에 대해 의견을 말하고 싶었지만이 포럼을 처음 접했고 충분한 크레딧이없는 것 같습니다. 그래서 당신이 좋아한다면 내 의견에 투표 할 수 있다면 대단히 감사 할 것입니다 :-)
추가 지시문이 필요하지 않습니다. 여기에 대한 내 의견이 있습니다.
HTML :
<div class="form-group" data-ng-class="{ 'has-error': submitted && !form.new_passwd.$valid }">
<input type="password" name="new_passwd" class="form-control" data-ng-model="data.new_passwd" placeholder="New Password" required data-ng-pattern="passwdRegex">
<small class="help-block" data-ng-show="submitted && form.new_passwd.$error.required">New password is required!</small>
<small class="help-block" data-ng-show="submitted && !form.new_passwd.$error.required && form.new_passwd.$error.pattern">New password is not strong enough!</small>
</div>
<div class="form-group" data-ng-class="{ 'has-error': submitted && !form.new_passwd_conf.$valid }">
<input type="password" name="new_passwd_conf" class="form-control" data-ng-model="data.new_passwd_conf" placeholder="Confirm New Password" required data-ng-pattern="passwdConfRegex">
<small class="help-block" data-ng-show="submitted && form.new_passwd_conf.$error.required">New password confirmation is required!</small>
<small class="help-block" data-ng-show="submitted && !form.new_passwd_conf.$error.required && form.new_passwd_conf.$error.pattern">New password confirmation does not match!</small>
</div>
자바 스크립트 :
$scope.passwdRegex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[^\da-zA-Z]).{8,}$/;
$scope.$watch('data.new_passwd', function() {
$scope.passwdConfRegex = new RegExp(Regex.escape($scope.data.new_passwd));
});
Regex.escape ()는 여기 에서 찾을 수 있습니다 .
매력처럼 작동합니다!
이미 존재하는 많은 솔루션에 추가하려면이 방법이 적합합니다.
( Jan 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>
<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
}
이것은 나를 위해 일했습니다.
지령:
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.$validate();
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();
});
}
}
})();
이와 같은 것이 나를 위해 작동합니다.
js :
.directive('sameAs', function() { return {
require : 'ngModel',
link : function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$validators.sameAs = function(modelValue, viewValue) {
var checkedVal = attrs.sameAs;
var thisInputVal = viewValue;
if (thisInputVal == checkedVal) {
return true; // valid
} else {
return false;
}
};
}
}; });
html :
<input type="password" name="password" id="password" ng-model="password" />
<input type="password" name="passwordRepeat" id="passwordRepeat"
ng-model="passwordRepeat" same-as="{{password}}" />
The Keep It Simple And Stupid(KISS) principle might be useful on this one. Its more faster and easier to check if both passwords match by doing the following:
<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>
And Before submitting the form, you can do this in your 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!');
};
};
});
You can test it in JSfiddle as well.
참고URL : https://stackoverflow.com/questions/14012239/password-check-directive-in-angularjs
반응형
'programing' 카테고리의 다른 글
| 여러 기본 매개 변수를 AsyncTask에 어떻게 전달할 수 있습니까? (0) | 2020.10.15 |
|---|---|
| UIScrollView는 자동 레이아웃 제약 조건을 사용하지 않습니다. (0) | 2020.10.15 |
| UIView에서 두 모서리 라운드 (0) | 2020.10.15 |
| UIScrollView 페이지 변경 감지 (0) | 2020.10.15 |
| Java에서 배열을 어떻게 채우나요? (0) | 2020.10.15 |