Format de téléphone et numéros de carte de crédit en AngularJS
https://stackoverflow.com//questions/12700145
-
12-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Question (mise en forme de numéro de téléphone):
Je vais avoir à le format de numéro de téléphone dans AngularJS, mais il n'y a pas de filtre.Est-il possible d'utiliser le filtre de monnaie ou de format de 10 chiffres (555) 555-5255?et encore de préserver le type de données du champ entier?
Question deux (masquage du numéro de carte de crédit):
J'ai une carte de crédit champ qui est mappé à AngularJS, comme:
<input type="text" ng-model="customer.creditCardNumber">
qui retourne le nombre entier (4111111111111111).Je tiens à le masquer avec xxx les 12 premiers chiffres et d'afficher uniquement les 4 derniers.Je pensais sur l'utilisation de filtre:limite pour cela, mais ne sais pas vraiment comment.Des idées?Est-il possible de aussi format le avec des tirets, mais encore conserver le type de données integer?sorte de 4111-1111-1111-1111.
La solution
Aussi, si vous avez besoin de formater numéro de téléphone sur la sortie de données, vous pouvez utiliser un filtre personnalisé comme celui-ci:
angular.module('ng').filter('tel', function () {
return function (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 10: // +1PPP####### -> C (PPP) ###-####
country = 1;
city = value.slice(0, 3);
number = value.slice(3);
break;
case 11: // +CPPP####### -> CCC (PP) ###-####
country = value[0];
city = value.slice(1, 4);
number = value.slice(4);
break;
case 12: // +CCCPP####### -> CCC (PP) ###-####
country = value.slice(0, 3);
city = value.slice(3, 5);
number = value.slice(5);
break;
default:
return tel;
}
if (country == 1) {
country = "";
}
number = number.slice(0, 3) + '-' + number.slice(3);
return (country + " (" + city + ") " + number).trim();
};
});
Ensuite, vous pouvez utiliser ce filtre dans votre template:
{{ phoneNumber | tel }}
<span ng-bind="phoneNumber | tel"></span>
Autres conseils
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 à utiliser exemple: <p>{{ phonenumberValue | phonenumber }}</p>
Filtre de 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;
};
});
La Directive exemple d'utilisation:
<phonenumber-directive placeholder="'Input phonenumber here'" model='myModel.phonenumber'></phonenumber-directive>
La Directive de 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
Comme shailbenq suggéré, phoneformat est génial.
Incluent le téléphone format dans votre site web.Créer un filtre pour l'angle de module ou de votre application.
angular.module('ng')
.filter('tel', function () {
return function (phoneNumber) {
if (!phoneNumber)
return phoneNumber;
return formatLocal('US', phoneNumber);
}
});
Ensuite, vous pouvez utiliser le filtre dans votre code HTML.
{{phone|tel}}
OR
<span ng-bind="phone|tel"></span>
Si vous souhaitez utiliser le filtre de votre contrôleur.
var number = '5553219876';
var newNumber = $filter('tel')(number);
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.
Angular-ui a une directive pour le masquage d'entrée.C'est peut-être ce que vous voulez pour le masquage (malheureusement, la documentation n'est pas grande):
Je ne pense pas que cela va aider à affaiblir le numéro de carte de crédit, cependant.
Vous pouvez aussi vérifier si masque de saisie formateur.
C'est une directive et il est appelé ui-mask et aussi c'est une partie de angular-ui.utils de la bibliothèque.
Voici de travail: Live exemple
Pour le temps de l'écriture 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 pour démontrer comment cette chose fonctionne dans la pratique.
C'est la manière la plus simple.De base je l'ai pris de http://codepen.io/rpdasilva/pen/DpbFf, et fait quelques modifications.Pour l'instant le code est plus simple.Et vous pouvez obtenir:dans le contrôleur "4124561232"en vue "(412) 456-1232"
Filtre:
myApp.filter 'tel', ->
(tel) ->
if !tel
return ''
value = tel.toString().trim().replace(/^\+/, '')
city = undefined
number = undefined
res = null
switch value.length
when 1, 2, 3
city = value
else
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
res = ('(' + city + ') ' + number).trim()
else
res = '(' + city
return res
Et de la directive:
myApp.directive 'phoneInput', ($filter, $browser) ->
require: 'ngModel'
scope:
phone: '=ngModel'
link: ($scope, $element, $attrs) ->
$scope.$watch "phone", (newVal, oldVal) ->
value = newVal.toString().replace(/[^0-9]/g, '').slice 0, 10
$scope.phone = value
$element.val $filter('tel')(value, false)
return
return
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.
Vous pouvez utiliser ng-modèle qui est plus facile et plus de lumière.http://tutorialzine.com/2014/12/learn-regular-expressions-in-20-minutes/.Ici u peut savoir à ce sujet,,,juste quelques mots significatifs,,,pas besoin d'une directive ou d'un filtre,,,,
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
- Pour NOUS, les numéros de il saute le premier pays code
- Standard conventions de nommage
- Utilise la classe à l'aide de code;ne pas faire une classe
- Permet l'utilisation de tous les autres attributs autorisés sur un élément d'entrée
Mon Code Pen
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;
};
}
);<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>J'ai modifié le code pour afficher le téléphone dans ce format de Valeur: +38 (095) 411-22-23 Ici, vous pouvez vérifier entrez description du lien ici
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.currencyVal;
});
myApp.directive('phoneInput', 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,12);
});
// 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);
});
}
};
});
myApp.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, num1, num2, num3;
switch (value.length) {
case 1:
case 2:
case 3:
city = value;
break;
default:
country = value.slice(0, 2);
city = value.slice(2, 5);
num1 = value.slice(5,8);
num2 = value.slice(8,10);
num3 = value.slice(10,12);
}
if(country && city && num1 && num2 && num3){
return ("+" + country+" (" + city + ") " + num1 +"-" + num2 + "-" + num3).trim();
}
else if(country && city && num1 && num2) {
return ("+" + country+" (" + city + ") " + num1 +"-" + num2).trim();
}else if(country && city && num1) {
return ("+" + country+" (" + city + ") " + num1).trim();
}else if(country && city) {
return ("+" + country+" (" + city ).trim();
}else if(country ) {
return ("+" + country).trim();
}
};
});
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.
Simple filtre à quelque chose comme ceci (utiliser le numérique en classe sur l'extrémité d'entrée du filtre charchter dans []):
<script type="text/javascript">
// Only allow number input
$('.numeric').keyup(function () {
this.value = this.value.replace(/[^0-9+-\.\,\;\:\s()]/g, ''); // this is filter for telefon number !!!
});
Voici 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);
};
}
};
}
J'ai résolu ce problème avec un filtre Angulaire ainsi, mais le mien prend avantage de regex de capturer les groupes et donc le code est vraiment court.J'paire avec une autre stripNonNumeric filtre pour désinfecter l'entrée:
app.filter('stripNonNumeric', function() {
return function(input) {
return (input == null) ? null : input.toString().replace(/\D/g, '');
}
});
L' phoneFormat filtrer correctement les formats d'un numéro de téléphone avec ou sans le code de zone.(Je n'ai pas besoin de numéro international de soutien.)
app.filter('phoneFormat', function() {
//this establishes 3 capture groups: the first has 3 digits, the second has 3 digits, the third has 4 digits. Strings which are not 7 or 10 digits numeric will fail.
var phoneFormat = /^(\d{3})?(\d{3})(\d{4})$/;
return function(input) {
var parsed = phoneFormat.exec(input);
//if input isn't either 7 or 10 characters numeric, just return input
return (!parsed) ? input : ((parsed[1]) ? '(' + parsed[1] + ') ' : '') + parsed[2] + '-' + parsed[3];
}
});
Utiliser simplement:
<p>{{customer.phone | stripNonNumeric | phoneFormat}}</p>
La regex pour le stripNonNumeric le filtre est venu de ici.
Trouver Plunker pour le Formatage des Numéros de Carte de Crédit en 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";
}]);
Injecter 'xeditable' module dans votre angulaire de l'application(disponible gratuitement):
var App = angular.module('App', ['xeditable']);
Et ensuite utiliser ses construit en fonction dans votre code HTML comme suit:
<div>{{ value|number:2 }}</div>
