的HTML

Question

我有输入确认电子邮件两次，

但是，当我使用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;
            })
        }
    }
})

Answer 1

您只需检查指令中的值存在，如下所示：

var notMatch = viewValue && viewValue != scope.form.email_booking.$viewValue;

然后你可以这样：

＆＃13;

(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;
        })
      }
    }
  }
})();

＆＃13;

<!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>

＆＃13;

如何运行自定义指令和正常ng-directive

的HTML

JS

1 个答案: