Использование ng-валюты для проверки ввода в пользовательском интерфейсе

Question

Я использую директиву ng-currency (найдено here), чтобы выполнить некоторую проверку ввода в проекте и хотел бы внести некоторые изменения в исходный код.

В настоящее время, хотя директива принимает любой вид ввода от пользователя, он выполняет всю фильтрацию только в модели данных. Например. даже если поле ввода имеет в нем «ABC», значение модели остается неизменным, поскольку оно не является реальным вводом валюты, но в представлении используются все буквенно-цифровые символы и символы. Это почти идеально, но только половина работы для моего дела, так как Я хочу заблокировать любые незаконные символы от ввода фактического входного интерфейса (где недопустимые символы - это ничего, кроме 0-9 цифр, период ('.') , и тире ('-')).Demo of directive here

Я сделал регулярное выражение, которое, я считаю, обрабатывает случаи, в которых я нуждаюсь (необязательный знак «-» только в начале ввода, который может появляться только один раз, чтобы обозначить отрицательные значения валюты, и ограничение на 0- 2 знака после запятой после опциональный «», который также может появиться только один раз)

[-]?[\d]+[.]?[\d]{0,2}

Теперь мой вопрос заключается в том, что я достаточно новое для Угловое и JS, так что я не уверен, где поместить это регулярное выражение в директива, которую я использую, не говоря уже о том, как достичь этого желаемого результата. Я также хотел бы установить атрибут maxlength для 11 символов в этой директиве, но опять же, это было потрясающе для новичка, который только недавно узнал о ng-repeat и других угловых шаблонах для навигации по этой директиве. У меня есть догадка о том, что я бы добавил функцию element.on('keypress'), которая проверила бы шаблон регулярного выражения, но опять же это только догадка, и я хотел бы посоветоваться с опытным, прежде чем попытаться потратить больше времени на это.

Любая помощь очень ценится, спасибо за внимание.

Answer 1

Вы должны использовать директиву для ограничения символов при нажатии клавиши.

Based on this directive вы можете настроить его:

angular.module('app').directive('restrictTo', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var re = RegExp(attrs.restrictTo); 
     var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/; 

     element[0].addEventListener('keydown', function(event) { 
      var v=element[0].value + event.key; 
      if (!exclude.test(event.key) && !re.test(v)) { 
       event.preventDefault(); 
      } 
     }); 
    } 
    } 
}); 

И это к введенному

<input type="text" ng-model="value" ng-currency restrict-to="[-0-9.]$"> 

Вы можете увидеть демо-here

Edit: Благодаря Bang для нового регулярного выражения. Это намного лучше оригинала.

Редактировать: Используйте это вместо limit-to = "[- 0-9.] $", поскольку цель состоит в том, чтобы ограничить 0 - 9 и. (и - возможно, не уверены, как это действительная валюта)