Как запустить обычную директиву и обычную директиву ng

0

У меня есть вход для подтверждения электронной почты дважды,

Однако, когда я использовал директиву check-email и required проверка уже не работает.

Любое предложение? Я не хочу, чтобы пользователь оставил это поле пустым

HTML

<input type="text"
      id="confirm_email_booking"
      name="confirm_email_booking"
      class="form-control"
      check-email
      ng-model="payment_contact.confirm_email_booking"
  />

JS

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;
            })
        }
    }
})
  • 0
    Ну, я не вижу здесь required ..
  • 0
    Почему бы вам просто не добавить функцию валидатора в ctrl.$validators ?
Теги:

1 ответ

0

Вы можете просто проверить, если значение присутствует в вашей директиве, как показано ниже:

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню