Пользовательская директива AngularJS для проверки формы для ввода даты

У меня есть приложение, написанное на Angular 1.5.3.

Вот что я хочу сделать:

У меня есть пользовательская форма с двумя типами ввода даты. Мне нужно добавить пользовательскую проверку в мою форму. Я хочу показать пользователю сообщение об ошибке, когда дата истечения срока действия в форме больше, чем дата вступления в силу в форме.

Я считаю, что могу сделать это с помощью пользовательской директивы и ng-messages.

Вот мой фрагмент кода:

 <form name="form.mainForm">

      <div>
        <span>Effective Date: </span>
        <input required type="date" name="effectiveDate" ng-model="effectiveDate" />

        <div>
          <span>Expiry Date: </span>
          <input 
            type="date" 
            name="expiryDate" 
            ng-model="expiryDate" 
            date-greater-than="{{ effectiveDate }}" />
        </div>
      </div>
  </form>


app.directive('dateGreaterThan', function () {
      return {
                restrict: 'A',
        require: 'ngModel',
        scope: false,
        link: function (scope, elm, attrs, ctrl) {
            console.log(' here we are ');

            function isValidDateRange(expiryDate, effectiveDate) {

                console.log(expiryDate, effectiveDate);

                if (effectiveDate == null || expiryDate == null ) {
                    return true;
                }

                return effectiveDate > expiryDate;
            }

            function validateDateRange(inputValue) {
                var expiryDate = inputValue;
                var effectiveDate = scope.effectiveDate;
                var isValid = isValidDateRange(expiryDate, effectiveDate);
                console.log("isValid: ", isValid);
                ctrl.$setValidity('dateGreaterThan', isValid);
                return inputValue;
            }

            ctrl.$parsers.unshift(validateDateRange);
            ctrl.$formatters.push(validateDateRange);
            attrs.$observe('dateGreaterThan', function () {
                validateDateRange(ctrl.$viewValue);
            });
      }
      };

Я попытался решить проблему здесь, но я не могу заставить свою директиву работать должным образом. Кажется, что он не рассчитывает даты, когда они меняются, и не интегрируется с ng-сообщениями.

Вот моя попытка: http://jsfiddle.net/aubz88/q7n3abre/


person Aubrey Quinn    schedule 22.09.2020    source источник


Ответы (1)


Модуль ngMessages должен быть загружен с cdn. Или установить с помощью менеджера пакетов. Модуль ngMessages не включен в AngularJS. https://code.angularjs.org/1.4.14/docs/api/ngMessages

var app = angular.module("hello", ['ngMessages']);

Некоторые другие моменты. Используйте валидаторы $ из ngModel.

ctrl.$validators.dateGreaterThan = validateDateRange;

Передайте другую дату со свойством области

 scope: {dateGreaterThan: '='},

Я думаю, что еще многое предстоит улучшить. Я тоже забыл кое-что об AngularJS. например: вы можете снова запустить проверку при изменении первой даты. Проверьте функцию $validate в https://code.angularjs.org/1.4.14/docs/api/ng/type/ngModel.NgModelController .

Вы можете проверить эту скрипту для базовой настройки: http://jsfiddle.net/hcjLkuzt/

person Pieter Van Poyer    schedule 22.09.2020