Директива для форматирования номера телефона

Ответ 1

Вы можете использовать маску UI Utils. Она позволяет определить входной формат allowd и обрабатывать валидацию для вас, а также форматирование

Ответ 2

Если ваш номер телефона равномерен, то есть все цифры цифры 10, это будет работать

  app.directive('formatPhone', [
        function() {
            return {
                require: 'ngModel',
                restrict: 'A',
                link: function(scope, elem, attrs, ctrl, ngModel) {
                    elem.add(phonenumber).on('keyup', function() {
                       var origVal = elem.val().replace(/[^\w\s]/gi, '');
                       if(origVal.length === 10) {
                         var str = origVal.replace(/(.{3})/g,"$1-");
                         var phone = str.slice(0, -2) + str.slice(-1);
                         jQuery("#phonenumber").val(phone);
                       }

                    });
                }
            };
        }
    ]);

И ваш html;

<input type="text" id="phonenumber" ng-model="phonenumber" format-phone>

Ответ 3

Вот как я это сделал с помощью пользовательской директивы.

customDirective.js

demoApp.directive('phoneInput', [ '$filter', '$browser', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModelCtrl) {
            var listener = function() {
                var value = $element.val().replace(/[^0-9]/g, '');
                $element.val($filter('tel')(value, false));
            };

            // This runs when we update the text field
            ngModelCtrl.$parsers.push(function(viewValue) {
                return viewValue.replace(/[^0-9]/g, '').slice(0,10);
            });

            // This runs when the model gets updated on the scope directly and keeps our view in sync
            ngModelCtrl.$render = function() {
                $element.val($filter('tel')(ngModelCtrl.$viewValue, false));
            };

            $element.bind('change', listener);
            $element.bind('keydown', function(event) {
                var key = event.keyCode;
                // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
                // This lets us support copy and paste too
                if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
                    return;
                }
                $browser.defer(listener); // Have to do this or changes don't get picked up properly
            });

            $element.bind('paste cut', function() {
                $browser.defer(listener);
            });
        }

    };
}]);

И с помощью этого пользовательского фильтра вы можете фильтровать модель.

customFilter.js

demoApp.filter('tel', function () {
    return function (tel) {
        console.log(tel);
        if (!tel) { return ''; }

        var value = tel.toString().trim().replace(/^\+/, '');

        if (value.match(/[^0-9]/)) {
            return tel;
        }

        var country, city, number;

        switch (value.length) {
            case 1:
            case 2:
            case 3:
                city = value;
                break;

            default:
                city = value.slice(0, 3);
                number = value.slice(3);
        }

        if(number){
            if(number.length>3){
                number = number.slice(0, 3) + '-' + number.slice(3,7);
            }
            else{
                number = number;
            }

            return ("(" + city + ") " + number).trim();
        }
        else{
            return "(" + city;
        }

    };
});

HTML

    <input type = "text" id="phonenumber" phone-input ng-model="USPhone" >
    <p>{{USPhone | tel}}</p>

Ответ 4

Я использовал директиву ui-mask в AngularUI для маскировки полей в прошлом с большим успехом. Документация не очень полезна, но вот простой пример того, как заставить ее работать.

Plunkr

• [email protected]
• [email protected]

Ответ 5

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

Кроме того, у меня есть валидатор, invalidFormat, который пользователь может установить пользовательское сообщение, если номер телефона недействителен

app.directive("phoneNumberValidator", function () {
    return {
        require: "ngModel",
        restrict: "A",
        link: function (scope, elem, attrs, ctrl) {

            var domElement = elem[0]; // Get DOM element
            var phoneNumberRegex = new RegExp("\\d{3}\\-\\d{3}\\-\\d{4}"); // Phone number regex
            var cursorIndex; // Index where the cursor should be

            // Create a parser to alter and validate if our
            // value is a valid phone number
            ctrl.$parsers.push(function (value) {

                // If our value is non-existent, we return undefined
                // WHY?: an angular model value should be undefined if it is empty
                if (typeof value === "undefined" || value === null || value == "") {
                    ctrl.$setValidity('invalidFormat', true); // No invalid format if the value of the phone number is empty
                    return undefined;
                }

                // PARSER LOGIC
                // =compare our value to a modified value after it has
                // been transformed into a "nice" phone number. If these
                // values are different, we set the viewValue to
                // the "nice" phone number. If these values are the same,
                // we render the viewValue (aka. "nice" phone number)
                var prevValue, nextValue;

                prevValue = value;
                nextValue = value.replace(/[\D]/gi, ""); // Strip all non-digits

                // Make the "nice" phone number
                if (nextValue.length >= 4 && nextValue.length <= 6) {
                    nextValue = nextValue.replace(/(\d{3})(\d{3})?/, "$1-$2");
                } else if (nextValue.length >= 7 && nextValue.length <= 10) {
                    nextValue = nextValue.replace(/(\d{3})(\d{3})(\d{4})?/, "$1-$2-$3");
                }

                // Save the correct index where the custor should be
                // WHY?: we do this here because "ctrl.$render()" shifts
                // the cursor index to the end of the phone number
                cursorIndex = domElement.selectionStart;
                if (prevValue != nextValue) {
                    ctrl.$setViewValue(nextValue); // *Calling this function will run all functions in ctrl.$parsers!
                } else {
                     ctrl.$render(); // Render the new, "nice" phone number
                }

                // If our cursor lands on an index where a dash "-" is,
                // move it up by one
                if (cursorIndex == 4 || cursorIndex == 8) {
                    cursorIndex = cursorIndex + 1;
                }

                var valid = phoneNumberRegex.test(value); // Test the validity of our phone number
                ctrl.$setValidity('invalidFormat', valid); // Set the validity of the phone number field
                domElement.setSelectionRange(cursorIndex, cursorIndex); // Assign the cursor to the correct index

                return value; // Return the updated value
            });
        }
    }
});

Лучшее место для размещения валидаторов - в $ parsers, и я нашел свой ответ из найденных здесь фактов: http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/. Вот почему мой ответ немного отличается от других.

В HTML

<input type="tel" class="form-control" id="PhoneNumber" name="PhoneNumber" ng-model="PhoneNumber" placeholder="Phone" maxlength="12" ng-value="PhoneNumber" required phone-number-validator server-validation>
<p class="help-block" ng-if="PhoneNumber.$error.invalidFormat">Phone Number is invalid</p>

Ответ 6

Пользовательская директива для телефонного формата с использованием angularjs

Формат изменения поля при вводе пользователем

Ограничивает ввод только номерами

Автоматически форматирует вход (541) 754-3010

app.directive("phoneNumberValidator", function () {
        return {	
            restrict: 'A',
			link: function (scope, elem, attrs, ctrl, ngModel) {
				elem.add(phonenumber).on('keyup', function () {
					var input = elem.val();
					// Strip all characters from the input except digits
					input = input.replace(/\D/g, '');

					// Trim the remaining input to ten characters, to preserve phone number format
					input = input.substring(0, 10);

					// Based upon the length of the string, we add formatting as necessary
					var size = input.length;
					if (size == 0) {
						input = input;
					} else if (size < 4) {
						input = '(' + input;
					} else if (size < 7) {
						input = '(' + input.substring(0, 3) + ') ' + input.substring(3, 6);
					} else {
						input = '(' + input.substring(0, 3) + ') ' + input.substring(3, 6) + ' - ' + input.substring(6, 10);
					}
					jQuery("#phonenumber").val(input);
				});
			}
		}
    });

Ответ 7

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

.directive('reformatPhoneNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {

        modelCtrl.$parsers.push(function(number) {
          var transformedNumber = number;

          if (number.match(/^\d{4}$/)) {
            transformedNumber = number.slice(0, 3) + " " + number.slice(3);
          }
          if(number.match(/^[\d\s]{8}$/)){
            transformedNumber = number.slice(0, 7) + " " + number.slice(7);
          }

          if (number.length > 12) {
            transformedNumber = number.slice(0, 12);
          }
          if (transformedNumber !== number) {
            modelCtrl.$setViewValue(transformedNumber);
            modelCtrl.$render();
          }
          return transformedNumber;
        });
      }
    };
  });