У меня есть вход для подтверждения электронной почты дважды,
Однако, когда я использовал директиву check-email
и required
проверка уже не работает.
Любое предложение? Я не хочу, чтобы пользователь оставил это поле пустым
<input type="text"
id="confirm_email_booking"
name="confirm_email_booking"
class="form-control"
check-email
ng-model="payment_contact.confirm_email_booking"
/>
app.directive('checkEmail', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var notMatch = (viewValue != scope.form.email_booking.$viewValue)
ctrl.$setValidity('notMatch', !notMatch)
return notMatch;
})
}
}
})
Вы можете просто проверить, если значение присутствует в вашей директиве, как показано ниже:
var notMatch = viewValue && viewValue != scope.form.email_booking.$viewValue;
Тогда у вас может быть что-то вроде этого:
(function() {
"use strict";
angular
.module('app', [])
.controller('MainCtrl', MainCtrl)
.directive('checkEmail', checkEmail);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
}
function checkEmail() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var notMatch = viewValue && viewValue != scope.form.email_booking.$viewValue;
ctrl.$setValidity('notMatch', !notMatch);
return notMatch;
})
}
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-controller="MainCtrl">
<div class="col-md-12">
<form name="form">
<input type="text" id="email_booking" name="email_booking" class="form-control" ng-model="payment_contact.email_booking" />
<hr>
<input type="text" id="confirm_email_booking" name="confirm_email_booking" class="form-control" check-email ng-model="payment_contact.confirm_email_booking" required />
<span class="text-danger" ng-if="form.confirm_email_booking.$error.required">
Required!
</span>
<span class="text-danger" ng-if="form.confirm_email_booking.$error.notMatch">
NotMatch!
</span>
<pre ng-bind="form.confirm_email_booking | json"></pre>
</form>
</div>
</body>
</html>
required
..ctrl.$validators
?