Блог

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

До сих пор мне удавалось форматировать число по нужному мне шаблону, но не на входе, а только на модели. Для этого примера я буду использовать денежный ввод, потому что с ним проще работать (я думаю). Это код, который я использую:

 function myMoney() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
            ngModelCtrl.$formatters.push( formatInput );
            ngModelCtrl.$render = renderViewValue;
            ngModelCtrl.$parsers.push( parseOutput );


            function formatInput( value ) {
                value = formatNumber(value);
                return value;
            }
            function parseOutput( value ) {
                value = formatNumber(value);
                return value;
            }
            function renderViewValue() {
                element.html( ngModelCtrl.$viewValue );
            }

            function formatNumber(value) {
                if(!value) {
                    value = '000';
                }

                var checkValue = value.replace(/[^0-9.]/g, '');
                if(checkValue != value) {
                    value = checkValue;
                }

                value = value.toString();

                if(value.length < 3) {
                    value = ('000' value).slice(-3);
                }

                var 
                    firstChar = value.slice(0, value.length-2),
                    lastChar  = value.slice(-2),
                    firstChar = Number(firstChar).toLocaleString(),
                    finalChar = '$' firstChar ',' lastChar;

                return finalChar;
            }
        }
    }
}
  

И это plunkr с кодом: http://plnkr.co/edit/UjZkPFL0V4FRrDUL9jAJ?p=preview

Основная проблема заключается в том, где находится вывод, если вы начинаете вводить ввод, значение не имеет маски, это просто числа. Но модель имеет правильную маску.

Итак, исходя из этого, у меня есть 2 основные проблемы:

• Во-первых: я хочу инвертировать эти результаты. Я хочу ввести текстовое поле и поместить маску в текстовое поле, в то время как модель — это просто число (без маски).
• Во-вторых: если я создаю кнопку для обновления значения в модели, она не форматируется в маске, она остается обычным текстом.

Как я могу решить эти проблемы?

попробуйте использовать маску пользовательского интерфейса, https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html , введите AA.999-99999 в поле Определение маски, чтобы соответствовать вашему шаблону.

 <input type="text" 
       ng-model="serviceOrderNumber" 
       ui-mask="AA.999-99999"  
       ui-mask-placeholder 
       ui-mask-placeholder-char="_"/>