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

Question

[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делась проверку и редактирование модели при первой инициализации?

Comments

[Илья]

Это не относится к ответу, но, блин, может, перед публикованием вопроса, проверять его на грамматику?

Answer 1

[Sergey Romanov]

несколько не понятных вещей. У вас дирекива validateMaxLength это значит что атрибут должен быть validate-max-length. Но вы почему то проверяете parseInt(elem.attr('maxlength'), 10); где атрибут maxlength. Я незнаю как это работает. Я не проверял, но на глаз, это работать не должно правильно.

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

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

Comments

[ForveAvar]

1) представим такую разметку

maxlength - это атрибут самого инпут на который вешается директива
представим следующую ситуацию: в инпуте хотелось бы, чтобы максимально допустимо вводить 3-х символов остальные игнорировать. Но когда модель грузиться с сервера то там уже 4 симовлы. Интересует как с директивы изменить модель один раз когда она получает первое значение

[Sergey Romanov]

Должно все проверить при загрузке тоже. Как вы выводите сообщение об ошибках? Используете $dirty?

[ForveAvar]

Sergey Romanov: никокого сообщения не должно бить. вот лінк jsfiddle.net/vszftjj5 . посмотрите на поведение текстового инпута. Также должно бить и для инпута number.
При загрузке данние не проверяются так как(я так думаю) до етого не делали валидацию а тепер хотят. Плюс таких инпутов может бить не 1 а 10 и писать для каждого валидацию не очень гибко.

[Sergey Romanov]

Ссылку которые вы дали не сохранен код. Там ни чего нет. Не дописаный инпут только. Нужно нажать сохранить или обновить, а потом make base.

[ForveAvar]

ссылка была дана для того, чтобы Вы посмотрели поведение в текстового инпут при наличии maxlength и такую же повединку нужно реализовать для числового инпут при вводе текста

вопрос уже не актуален, я оставил вариант из $formatter