ngModel.$setValidity 只工作一次

Question

我目前正在处理 angular bootstrap ui datepicker popup 验证，问题是我可以设置最大最小日期并验证（仅当用户通过单击日历设置日期时），但是当用户手写日期那些验证没用，我为此做了一个指令，但只验证并设置一次错误，这是我的标记

<div class="form-group clearfix">
  <div class="col-md-3 m-t-b-20">
    <label>Date validation</label>
    <p class="input-group col-md-12">

      <input id="validationDate"
             type="text"
             name="validationDate"
             class="form-control"
             uib-datepicker-popup="{{ Ctrl.format }}"
             data-ng-model="Ctrl.formObj.validationDate"
             is-open="Ctrl.validationDate.opened"
             datepicker-options="Ctrl.dateOptions"
             ng-required="true"
             close-text="Close"
             placeholder="Fecha de radicacion"
             ng-click="Ctrl.openDatePicker('validationDate')"
             required
             date-validate/>

      <span class="input-group-btn">
        <button type="button"
                class="btn btn-default"
                ng-click="Ctrl.openDatePicker('validationDate')"
                data-ng-disabled="Ctrl.blockFields">
          <i class="glyphicon glyphicon-calendar"></i>
        </button>
      </span>

    </p>

    <!-- THE ERROR TO SHOW -->
    <p data-ng-show="stepOne.validationDate.$error.validbound"
       class="text-red">
      the selected date exeeds the max and min date boundaries
    </p>
  </div>

这是我的指令

var dateValidate = function () {
    return {
      require: 'ngModel',
      link: function (scope, elem, attr, ngModel) {

        elem.bind('keyup', function(value) {

            var atrvls = scope.$eval(attr.datepickerOptions),
                maxDate = moment(atrvls.maxDate, 'DD/MM/YYYY'),
                minDate = moment(atrvls.minDate, 'DD/MM/YYYY'),
                cDate = moment(elem.val(), 'DD/MM/YYYY', true);

            ngModel.$setValidity('validbound', true);

            if (!cDate.isValid()) {
                return false;
            }

            if (!cDate.isBetween(minDate, maxDate)) {
                ngModel.$setValidity('validbound', false);
            }

        });

    }
};

};

我想知道为什么只进行第一次验证，然后指令什么都不做

Answer 1

这里有几件事。

首先，Moment 的isBetween() 中给出的日期是不包含日期的，而datePicker 的minDate 和maxDate 是包含日期的。因此，您需要传递其他参数以将这些最小和最大日期包含在该范围内：

cDate.isBetween(minDate, maxDate, null, '[]')

其次，如果您正在寻找有关日期是否在范围内的即时反馈，那么您需要将 $setValidity 包装在 scope.$apply 函数中。

如果不查看 Datepicker 弹出窗口的 javascript，我无法确切说明为什么需要这样做，但从实验中我可以看到它仅在弹出窗口关闭时应用 ng-invalid-validbound 属性（而应用 ng-valid-validbound一旦有效性设置为真）。我认为这是提高性能的方式，因为无论如何您都无法使用弹出窗口选择越界日期，您只能采用另一种方式 - 从无效日期到使用弹出窗口选择有效日期。

这或多或少是我的做法：

var dateValidate = function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModel) {
      elem.bind('keyup', function(value) {

        var atrvls = scope.$eval(attr.datepickerOptions),
          maxDate = moment(atrvls.maxDate, 'DD/MM/YYYY'),
          minDate = moment(atrvls.minDate, 'DD/MM/YYYY'),
          cDate = moment(elem.val(), 'DD/MM/YYYY', true);

        if (!cDate.isValid()) {
          scope.$apply(ngModel.$setValidity('validbound', null));
          return false;
        }

        if (!cDate.isBetween(minDate, maxDate, null, '[]')) {
          scope.$apply(ngModel.$setValidity('validbound', false));
        } else {
          scope.$apply(ngModel.$setValidity('validbound', true));
        }

      });
    }
  };
};

这是一个笨蛋：http://plnkr.co/edit/toXpEWNa99o7Gfs69KfZ?p=preview

Answer 2

在链接函数中 - 使用您的自定义验证创建一个验证函数，您可以在 ngModel.$viewValue 上添加 $watch

scope.$watch(function () {
             return ngModel.$viewValue;
         }, validate);

我认为“模糊”会更好，而不是“Keyup”。