Une directive pour formater numéro de téléphone

Vous pouvez utiliser L'INTERFACE utilisateur Utils masque
Il vous permet de définir un allowd format d'entrée et se chargera de la validation pour vous ainsi que la mise en forme

OriginalL'auteur

Voici comment je l'ai fait avec une coutume directive.

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);
        });
    }

};

}]);

Et l'utilisation de ce filtre personnalisé, vous pouvez filtrer le modèle.

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>

OriginalL'auteur

J'ai écrit cela, et fonctionne plutôt bien. Le seul hic est que vous ne peut pas supprimer les tirets "-" dans le nombre. Ce code peut être facilement modifié pour tenir compte de cela.

En plus, j'ai un validateur, invalidFormat qu'un utilisateur peut définir un message personnalisé dans le cas où le numéro de téléphone est invalide

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
});
}
}
});

Le meilleur endroit pour mettre des validateurs est dans $analyseurs, que j'ai trouvé ma réponse à partir d'éléments de preuve trouvés ici: http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/. C'est pourquoi ma réponse est un peu différent que les autres.

Dans le code 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>

OriginalL'auteur