@ForveAvar

Как организовать валидацию и изменение модели через директиву?

Здравствуйте!

Есть такая задача: для input[type="number"] надо реализовать поддержку свойства maxlength но так чтоб оно работало как в input[type="text"], тоесть запрещало ввод если дошло до грани maxlength.
Я сделал один вариант через $parsers и он роботает как нада, но етот вариант не покривает кейс когда данние попали в директиву уже неверними. Для етого варианта я делал через $formatter и он тоже работает но чтото мне подсказивает что я сделал глупость
вот ета директива как я ее cделал
angular.module('dashboardApp')
  .directive('validateMaxLength', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      scope: {
        defaultValue: '@'
      },
      link: function (scope, elem, attrs, ctrl) {
        var previousValue = scope.defaultValue;
        var maxLength = parseInt(elem.attr('maxlength'), 10);

        function updateViewValue(updateValue){
          ctrl.$setViewValue(updateValue);
          ctrl.$render();
        }

        if (!ctrl){
          return;
        }

        if (isNaN(parseInt(previousValue, 10))){
          previousValue = "1";
        }

        if (maxLength > 0 && !isNaN(maxLength)){
          ctrl.$parsers.push(function (inputValue){
            if (inputValue.length > maxLength){
              updateViewValue(previousValue);

              return previousValue;
            }
            previousValue = inputValue;

            return inputValue;
          });

          ctrl.$formatters.push(function(modelValue){
            if (modelValue.length > maxLength){
              updateViewValue(previousValue);

              return previousValue;
            }
            return modelValue;
          });
        }
      }
    };
  });


использование
<input ng-model=imageInterval" maxlength="3" type="number" validate-max-length default-value="{{defaultValue}}"></input>


Как можна cделась проверку и редактирование модели при первой инициализации?
  • Вопрос задан
  • 2219 просмотров
Пригласить эксперта
Ответы на вопрос 1
Serhioromano
@Serhioromano
Web Developer
несколько не понятных вещей. У вас дирекива validateMaxLength это значит что атрибут должен быть validate-max-length. Но вы почему то проверяете parseInt(elem.attr('maxlength'), 10); где атрибут maxlength. Я незнаю как это работает. Я не проверял, но на глаз, это работать не должно правильно.

Как можна зделась проверку и редактирование модели при первой инициализации?


Не совсем понял вопрос? Вам над что бы проверка поля произошла при загрузке формы до начала ввода данных? Или вам просто нужно в момент инициализации формы, что то сделать с моделью? То есть то что делаешь котроллер?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы