Как использовать angular ui-mask для маскировки номера телефона с дополнительным расширением?

Ответ 1

По-прежнему нет ответа для этого через две недели. Я бы предположил, что все согласны с тем, что этот AngularUI слишком ограничен в работе с этой ситуацией.

В итоге я использовал jquery.inputmask (http://github.com/RobinHerbots/jquery.inputmask).

Мы использовали эту библиотеку расширений jQuery, так как нет Angular. Он по-прежнему остается самой мощной маской ввода. По крайней мере, у него есть все функции, которые мне нужны.

Вот моя настройка.

• Сначала, конечно, нужно NuGet или загрузить библиотеку. Текущая версия (3.0.55) разделяет функции на разные js файлы. (дата, число, телефон...) Обязательно укажите все, что вам нужно.

• Создайте директиву для атрибута или класса маски ввода. Используйте link в этой директиве, чтобы использовать jQuery для применения маски ввода:

Вот код:

(function(){
    'use strict';        
    var directiveId = 'myInputMask';
    angular.module('myApp')..directive(directiveId, function() {
        return {
            restrict: 'AC',
            link: function (scope, el, attrs) {
                el.inputmask(scope.$eval(attrs.myInputMask));
                el.on('change', function() {
                    scope.$eval(attrs.ngModel + "='" + el.val() + "'");
                    // or scope[attrs.ngModel] = el.val() if your expression doesn't contain dot.
                });
            }
        }
    });
})();    

• Наконец, примените эту директиву в атрибуте или классе в нашем Html.

Вот Html:

<input type="text" id="phone"
    my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
    required="" ng-model="employee.phone">

Конечно, с jquery.inputmask мы можем иметь гораздо более сложную маску ввода:

<input type="text" id="salary"
    dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
    model="employee.salary">

Итак, вывод: AngularUI еще предстоит пройти долгий путь, чтобы удовлетворить наши потребности. В настоящий момент jquery.inputmask все еще процветает.

Ответ 2

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

Решение для вашей маски будет:

(999) 999-9999 ext. ?9?9?9

Знаки вопроса в вашей маске будут отмечать следующий символ как необязательный. Поверьте мне, это работает.

Извините за то, что вы так долго отвечали.

Ответ 3

(999) 999-9999 ext. ?9?9?9

Это будет работать хорошо, но если вы хотите очистить от размытия и поместить маску обратно, вам нужно немного больше, я использовал это как

<input type='text'
  ng-model='customer.phone'
  ui-mask="{{phoneMask}}"
  ng-blur="removeMask()"
  ng-focus="placeMask()" />

И в моем контроллере:

$scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
$scope.removeMask = function () {
   if ($scope.rep.phone.length === 10) {
        $scope.phoneMask= "(999) 999-9999";
    }
};
$scope.placeMask = function () {
  $scope.phoneMask= "(999) 999-9999 ext. ?9?9?9";
}

Надеюсь, это поможет!

Ответ 4

Хорошим решением этой проблемы является использование ngMask, что позволяет делать именно то, что вы хотите, без jQuery. Для этого просто добавьте '?' после символа, который вы хотите быть необязательным:

mask="9?9999-9999

Это отлично подходит для входов, таких как бразильские телефонные номера, которые могут иметь как 8, так и 9 символов.