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

у нас есть демо здесь на странице угловой интерфейс.

интересно, как мы можем написать маску с дополнительным добавочным номером.

(999) 999-9999 ext. 999 сделает необходимое расширение.

13
angular-ui angularjs

4 ответов

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

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

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

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

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

21
(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";
}

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

3

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

Я закончил с помощью jquery.inputmask (http://github.com/RobinHerbots/jquery.inputmask).

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

вот мой установка.

  1. во-первых, конечно, это NuGet или загрузить библиотеку. Текущая версия (3.0.55) разделяет функции на разные JS-файлы. (дата, номер, телефон... Обязательно включите все, что вам нужно.

  2. создайте директиву для атрибута или класса входной маски. Использовать 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.
                });
            }
        }
    });
})();
  1. наконец, применить эта директива в атрибуте или классе в нашем 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 еще предстоит пройти долгий путь, чтобы удовлетворить наши потребности. В этот момент ... --6--> по-прежнему процветает.

1

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

mask="9?9999-9999

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

1