Format de téléphone et numéros de carte de crédit en AngularJS

J'ai créé un AngularJS module pour gérer ce problème au sujet de l'phonenumbers pour moi avec une coutume de la directive et de l'accompagnement de filtre.

jsfiddle exemple: http://jsfiddle.net/aberke/s0xpkgmq/

Filtre d'exemple:
<p>{{ phonenumberValue | phonenumber }}</p>

Filtre code:

.filter('phonenumber', function() {
    /* 
    Format phonenumber as: c (xxx) xxx-xxxx
        or as close as possible if phonenumber length is not 10
        if c is not '1' (country code not USA), does not use country code
    */

    return function (number) {
        /* 
        @param {Number | String} number - Number that will be formatted as telephone number
        Returns formatted number: (###) ###-####
            if number.length < 4: ###
            else if number.length < 7: (###) ###

        Does not handle country codes that are not '1' (USA)
        */
        if (!number) { return ''; }

        number = String(number);

        //Will return formattedNumber. 
        //If phonenumber isn't longer than an area code, just show number
        var formattedNumber = number;

        //if the first character is '1', strip it out and add it back
        var c = (number[0] == '1') ? '1 ' : '';
        number = number[0] == '1' ? number.slice(1) : number;

        //# (###) ###-#### as c (area) front-end
        var area = number.substring(0,3);
        var front = number.substring(3, 6);
        var end = number.substring(6, 10);

        if (front) {
            formattedNumber = (c + "(" + area + ") " + front);  
        }
        if (end) {
            formattedNumber += ("-" + end);
        }
        return formattedNumber;
    };
});

Directive exemple d'utilisation:

<phonenumber-directive placeholder="'Input phonenumber here'" model='myModel.phonenumber'></phonenumber-directive>

Directive code:

.directive('phonenumberDirective', ['$filter', function($filter) {
    /*
    Intended use:
        <phonenumber-directive placeholder='prompt' model='someModel.phonenumber'></phonenumber-directive>
    Where:
        someModel.phonenumber: {String} value which to bind only the numeric characters [0-9] entered
            ie, if user enters 617-2223333, value of 6172223333 will be bound to model
        prompt: {String} text to keep in placeholder when no numeric input entered
    */

    function link(scope, element, attributes) {

        //scope.inputValue is the value of input element used in template
        scope.inputValue = scope.phonenumberModel;

        scope.$watch('inputValue', function(value, oldValue) {

            value = String(value);
            var number = value.replace(/[^0-9]+/g, '');
            scope.phonenumberModel = number;
            scope.inputValue = $filter('phonenumber')(number);
        });
    }

    return {
        link: link,
        restrict: 'E',
        scope: {
            phonenumberPlaceholder: '=placeholder',
            phonenumberModel: '=model',
        },
        //templateUrl: '/static/phonenumberModule/template.html',
        template: '<input ng-model="inputValue" type="tel" class="phonenumber" placeholder="{{phonenumberPlaceholder}}" title="Phonenumber (Format: (999) 9999-9999)">',
    };
}])

Code complet avec module et comment l'utiliser:
https://gist.github.com/aberke/042eef0f37dba1138f9e

J'ai aussi trouvé que le plugin JQuery qui est facile à inclure dans votre Angulaire de l'Application (également avec bower :D), et qui de vérifier tout les codes de pays avec leurs masques :
intl-tel-entrée

Vous pouvez ensuite utiliser la validationScript option afin de vérifier la validité de la saisie de la valeur.

Vous pouvez aussi vérifier si masque de saisie formateur.

Ce est une directive et il est appelé ui-mask et aussi que c'est une partie de angular-ui.utils bibliothèque.

Voici de travail: Live exemple

Pour le moment de la rédaction de ce post, il ne sont pas tous des exemples d'utilisation de la présente directive, donc j'ai fait un très exemple simple de démontrer comment cette chose fonctionne dans la pratique.

Essayez d'utiliser phoneformat.js (http://www.phoneformat.com/), vous pouvez non seulement le format de numéro de téléphone basé sur les paramètres régionaux utilisateur (fr-fr, ja-JP, fr-fr, de-de etc) mais il valide également le numéro de téléphone. Son très robuste, basé sur la bibliothèque sur googles libphonenumber projet.

J'ai pris aberke de la solution et l'a modifié pour l'adapter à mon goût.

• Il produit un seul élément d'entrée
• Il accepte éventuellement des extensions de
• Pour NOUS de chiffres, il saute le premier pays code
• Standard conventions de nommage
• Utilise la classe à l'aide de code; ne pas faire une séance
• Permet l'utilisation de tous les autres attributs autorisés sur un élément de saisie

Mon Code Pen

JS:

var myApp = angular.module('myApp', []);
myApp.controller('exampleController',
function exampleController($scope) {
$scope.user = { profile: {HomePhone: '(719) 465-0001 x1234'}};
$scope.homePhonePrompt = "Home Phone";
});
myApp
/*
Intended use:
<phone-number placeholder='prompt' model='someModel.phonenumber' />
Where: 
someModel.phonenumber: {String} value which to bind formatted or unformatted phone number
prompt: {String} text to keep in placeholder when no numeric input entered
*/
.directive('phoneNumber',
['$filter',
function ($filter) {
function link(scope, element, attributes) {
//scope.inputValue is the value of input element used in template
scope.inputValue = scope.phoneNumberModel;
scope.$watch('inputValue', function (value, oldValue) {
value = String(value);
var number = value.replace(/[^0-9]+/g, '');
scope.inputValue = $filter('phoneNumber')(number, scope.allowExtension);
scope.phoneNumberModel = scope.inputValue;
});
}
return {
link: link,
restrict: 'E',
replace: true,
scope: {
phoneNumberPlaceholder: '@placeholder',
phoneNumberModel: '=model',
allowExtension: '=extension'
},
template: '<input ng-model="inputValue" type="tel" placeholder="{{phoneNumberPlaceholder}}" />'
};
}
]
)
/* 
Format phonenumber as: (aaa) ppp-nnnnxeeeee
or as close as possible if phonenumber length is not 10
does not allow country code or extensions > 5 characters long
*/
.filter('phoneNumber', 
function() {
return function(number, allowExtension) {
/* 
@param {Number | String} number - Number that will be formatted as telephone number
Returns formatted number: (###) ###-#### x #####
if number.length < 4: ###
else if number.length < 7: (###) ###
removes country codes
*/
if (!number) {
return '';
}
number = String(number);
number = number.replace(/[^0-9]+/g, '');
//Will return formattedNumber. 
//If phonenumber isn't longer than an area code, just show number
var formattedNumber = number;
//if the first character is '1', strip it out 
var c = (number[0] == '1') ? '1 ' : '';
number = number[0] == '1' ? number.slice(1) : number;
//(###) ###-#### as (areaCode) prefix-endxextension
var areaCode = number.substring(0, 3);
var prefix = number.substring(3, 6);
var end = number.substring(6, 10);
var extension = number.substring(10, 15);
if (prefix) {
//formattedNumber = (c + "(" + area + ") " + front);
formattedNumber = ("(" + areaCode + ") " + prefix);
}
if (end) {
formattedNumber += ("-" + end);
}
if (allowExtension && extension) {
formattedNumber += ("x" + extension);
}
return formattedNumber;
};
}
);

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="exampleController">
<p>Phone Number Value: {{ user.profile.HomePhone || 'null' }}</p>
<p>Formatted Phone Number: {{ user.profile.HomePhone | phoneNumber }}</p>
<phone-number id="homePhone"
class="form-control" 
placeholder="Home Phone" 
model="user.profile.HomePhone"
ng-required="!(user.profile.HomePhone.length || user.profile.BusinessPhone.length || user.profile.MobilePhone.length)" />
</div>

Vous aurez besoin pour créer des contrôles de formulaire (les directives) pour le numéro de téléphone et de la carte de crédit. Voir la section "mise en Œuvre personnalisée de contrôle de formulaire (à l'aide de ngModel)" sur la les formes page.

Comme Narretz déjà mentionné, Angular-ui Masque de la directive devrait vous aider à démarrer.

Ici est la façon dont j'ai créé le ssn directive, qui vérifie la présence de la le modèle, et j'ai utilisé RobinHerbots jquery.inputmask

angular.module('SocialSecurityNumberDirective', [])
.directive('socialSecurityNumber', socialSecurityNumber);
function socialSecurityNumber() {
var jquery = require('jquery');
var inputmask = require("jquery.inputmask");
return {
require: 'ngModel',
restrict: 'A',
priority: 1000,
link: function(scope,element, attr, ctrl) {
var jquery_element = jquery(element);
jquery_element.inputmask({mask:"***-**-****",autoUnmask:true});
jquery_element.on('keyup paste focus blur', function() {
var val = element.val();    
ctrl.$setViewValue(val);
ctrl.$render();
});
var pattern = /^\d{9}$/;
var newValue = null;
ctrl.$validators.ssnDigits = function(value) {
newValue = element.val();
return newValue === '' ? true : pattern.test(newValue);    
};
}
};
}

Trouver Plunker pour le Formatage des Numéros de Carte de Crédit utilisant angularjs directive. Format des Numéros de Carte de xxxxxxxxxxxx3456 Obtenues.

angular.module('myApp', [])
.directive('maskInput', function() {
return {
require: "ngModel",
restrict: "AE",
scope: {
ngModel: '=',
},
link: function(scope, elem, attrs) {
var orig = scope.ngModel;
var edited = orig;
scope.ngModel = edited.slice(4).replace(/\d/g, 'x') + edited.slice(-4);
elem.bind("blur", function() {
var temp;
orig  = elem.val();
temp = elem.val();
elem.val(temp.slice(4).replace(/\d/g, 'x') + temp.slice(-4));
});
elem.bind("focus", function() {
elem.val(orig);
});  
}
};
})
.controller('myCtrl', ['$scope', '$interval', function($scope, $interval) {
$scope.creditCardNumber = "1234567890123456";
}]);