반응형
Angular ng-messages: 비밀번호 확인 방법
상황:
앵귤러 앱에서 즉각적인 검증을 위해 ng-messages 디렉티브를 사용하고 있습니다.한 가지를 제외하고 모든 것이 정상적으로 작동하고 있습니다. '비밀번호 확인' 필드의 유효성을 확인해야 하는데 어떻게 해야 할지 모르겠다는 것입니다.
코드:
<form name="autentication_form" novalidate="" ng-submit="submit_register()">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" name="email" ng-model="registerData.email" required>
<div class="form-errors" ng-messages="autentication_form.email.$error" role="alert" ng-if='autentication_form.email.$dirty'>
<div class="form-error" ng-message="required">You did not enter the email</div>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="password" ng-model="registerData.password" required>
<div class="form-errors" ng-messages="autentication_form.password.$error" role="alert" ng-if='autentication_form.password.$dirty'>
<div class="form-error" ng-message="required">Please enter the password</div>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password confirmation</span>
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required>
<div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" role="alert" ng-if='autentication_form.password_confirmation.$dirty'>
<div class="form-error" ng-message="required">Password confirmation required</div>
</div>
</label>
</form>
질문:
ng-messages를 사용하여 비밀번호 확인이 일치하는지 확인하려면 어떻게 해야 합니까?
가장 쉬운 방법은 패턴을 사용하는 것입니다.난 괜찮아!
<input type="password" name="new_password1" ng-model="new_password1">
<input type="password" name="new_password2" ng-pattern="\b{{new_password1}}\b" ng-model="new_password2">
<div ng-messages="passwordForm.new_password2.$error">
<div ng-message="pattern">Not equal!!!</div>
</div>
가장 좋은 방법은 지시를 사용하는 것입니다.여기서 가장 큰 문제는 비밀번호와 비밀번호 확인 입력을 모두 감시해야 한다는 것입니다.
여기 도움이 될 수 있는 솔루션이 있습니다.
angular.module('app', ['ngMessages'])
.controller('ctrl', function($scope) {
$scope.registerData = {};
})
.directive('confirmPwd', function($interpolate, $parse) {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModelCtrl) {
var pwdToMatch = $parse(attr.confirmPwd);
var pwdFn = $interpolate(attr.confirmPwd)(scope);
scope.$watch(pwdFn, function(newVal) {
ngModelCtrl.$setValidity('password', ngModelCtrl.$viewValue == newVal);
})
ngModelCtrl.$validators.password = function(modelValue, viewValue) {
var value = modelValue || viewValue;
return value == pwdToMatch(scope);
};
}
}
});<html ng-app="app">
<head>
<script data-require="angular.js@~1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="angular-messages@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<form name="autentication_form" novalidate="" ng-submit="submit_register()">
<label class="item item-input">
<span class="input-label">Email</span>
<input type="text" name="email" ng-model="registerData.email" required="" />
<div class="form-errors" ng-messages="autentication_form.email.$error" ng-if='autentication_form.email.$touched'>
<span class="form-error" ng-message="required">You did not enter the email</span>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" name="password" ng-model="registerData.password" required />
<div class="form-errors" ng-messages="autentication_form.password.$error" ng-if='autentication_form.password.$touched'>
<span class="form-error" ng-message="required">Please enter the password</span>
</div>
</label>
<label class="item item-input">
<span class="input-label">Password confirmation</span>
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required="" confirm-pwd="registerData.password" />
<div class="form-errors" ng-messages="autentication_form.password_confirmation.$error" ng-if='autentication_form.password_confirmation.$touched'>
<span class="form-error" ng-message="required">Password confirmation required</span>
<span class="form-error" ng-message="password">Password different</span>
</div>
</label>
</form>
</body>
</html>개발할 때, 직접 수표를 작성해야 한다는 사실을 직면할 수 있으며, 이는 양식의 유효성에 영향을 미칩니다.이러한 체크가 간단한 경우(두 값의 비교 등)에는 상황별로 자신의 체크표를 작성하는 것보다 일반적인 가이드라인을 사용하는 것이 좋습니다.use-form-error 디렉티브를 참조해 주세요.
jsfiddle의 라이브 예시.
angular.module('ExampleApp', ['use', 'ngMessages'])
.controller('ExampleController', function($scope) {
});.errors {
color: maroon
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/Stepan-Kasyanenko/use-form-error/master/src/use-form-error.js"></script>
<div ng-app="ExampleApp">
<div ng-controller="ExampleController">
<form name="ExampleForm">
<label>Password</label>
<input ng-model="password" required />
<br>
<label>Confirm password</label>
<input ng-model="confirmPassword" name="confirmPassword" use-form-error="isNotSame" use-error-expression="password && confirmPassword && password!=confirmPassword" required />
<div ng-show="ExampleForm.$error.isNotSame" class="errors">Passwords Do Not Match!</div>
<div ng-messages="ExampleForm.confirmPassword.$error" class="errors">
<div ng-message="isNotSame">
Passwords Do Not Match (from ng-message)!
</div>
</div>
</form>
</div>
</div>(를 사용하여) 이렇게 했습니다.ng-pattern):
<md-input-container class="md-block">
<label>New Password</label>
<input ng-model="user.password" name="password" type="password" required ng-pattern="'.{8,}'" />
<div ng-messages="form.password.$error">
<div ng-message="required">Password required.</div>
<div ng-message="pattern">Password must be at least 8 characters.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Confirm Password</label>
<input ng-model="user.confirmPassword" name="confirmPassword" type="password" ng-pattern="user.password|escapeRegex" required />
<div ng-messages="form.confirmPassword.$error">
<div ng-message="required">Password confirmation required.</div>
<div ng-message="pattern">Passwords do not match.</div>
</div>
</md-input-container>
그리고 다음 필터가 변환합니다.ng-pattern리터럴에 대한 regex:
module.filter('escapeRegex', function(){
return function(str){
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}
});
ngMessage는 폼오브젝트의 DOM 필드명에 $error.message_field_name을 추가하는 것으로 동작합니다(물론 범위 내).따라서 DOM 폼 이름이 autentication_form이고 DOM 필드 이름이 password_confirmation이면 $scope를 설정해야 합니다.autentication_form.password_information.$error.nomatch(또는 원하는 ngMessage 이름)를 true로 지정하면 "Don't match" 오류가 나타납니다.
마크업:
<input type="password" name="password_confirmation" ng-model="registerData.password_confirmation" required />
<div ng-messages="autentication_form.password_confirmation.$error">
<div ng-message="required">Please repeat your password.</div>
<div ng-message="nomatch">Doesn't match.</div>
</div>
</div>
코드, 특별한 것은 없고, 두 개의 패스워드를 모두 보고 있을 뿐입니다.
$scope.$watch("registerData.password + registerData.password_confirmation", function () {
$scope.autentication_form.password_confirmation.$error.nomatch = $scope.registerData.password !== $scope.registerData.password_confirmation;
});
이온(ionic) 검증만 사용했습니다.
새 암호 새 암호가 필요합니다.
<label class="item item-input inputRadius">
<span class="input-label">Confirm Password</span>
<input type="password" placeholder="Confirm Password" ng-model="passwordUpdateInfo.confirmPassword" name="confirmPassword" required>
</label>
<div ng-show="passwordUpdateForm.$submitted || passwordUpdateForm.confirmPassword.$touched">
<div ng-show="passwordUpdateForm.confirmPassword.$error.required" class="errorMessage">Confirm Password is required</div>
</div>
<div ng-show="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">
Password not match..(amar from india)
</div>
<button class="button button-positive button-block" ng-disabled="passwordUpdateInfo.confirmPassword.length > 0 && passwordUpdateInfo.confirmPassword != passwordUpdateInfo.newPassword">Update</button>
언급URL : https://stackoverflow.com/questions/31671221/angular-ng-messages-how-to-check-password-confirmation
반응형
'programing' 카테고리의 다른 글
| 스프링 부츠의 장점 (0) | 2023.03.10 |
|---|---|
| json을 사용하여 튜플을 인코딩하는 가장 좋은 방법 (0) | 2023.03.10 |
| VueJs 템플릿.외부 템플릿을 로드하는 방법 (0) | 2023.03.10 |
| 같은 리피터 필드의 값이 다른 언어로 갱신되면 ACF 리피터 필드의 값은 늘이 됩니다. (0) | 2023.03.10 |
| UTF-8 문자를 사용하여 오브젝트노드를 JSON 문자열로 이스케이프 ASC에 쓰기II (0) | 2023.03.10 |