web-dev-qa-db-fra.com

Comment utiliser un masque ui angulaire pour masquer un numéro de téléphone avec extension facultative?

Nous avons la démo ici sur la page angular-ui.

Vous vous demandez comment écrire un masque avec un numéro d'extension facultatif.

(999) 999-9999 ext. 999 rendra l'extension requise.

angularjsangular-ui
13
Blaise

Toujours pas de réponse pour celui-ci après deux semaines. Je suppose que tous sont d'accord pour dire que AngularUI est trop limité pour gérer cette situation. 

J'ai fini par utiliser jquery.inputmask ( http://github.com/RobinHerbots/jquery.inputmask ).

Nous utilisons cette bibliothèque d’extensions jQuery car il n’existe pas d’Angle. Il apparaît toujours le masque de saisie le plus puissant. Au moins, il a toutes les fonctions dont j'ai besoin.

Voici ma configuration.

  1. Tout d’abord, bien sûr, vous devez utiliser NuGet ou télécharger la bibliothèque. La version actuelle (3.0.55) sépare les fonctions en différents fichiers js. (date, chiffre, téléphone ...) Assurez-vous d’inclure tout ce dont vous avez besoin. 

  2. Créez une directive pour l'attribut ou la classe du masque de saisie. Utilisez link dans cette directive pour utiliser jQuery afin d’appliquer un masque de saisie:

Voici le code:

(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. Enfin, appliquez cette directive dans attribut ou classe dans notre HTML.

Voici le HTML:

<input type="text" id="phone"
    my-input-mask="{mask: '(999)999-9999[ ext. 9999]', greedy: false}"
    required="" ng-model="employee.phone">

Bien sûr, avec jquery.inputmask, nous pouvons avoir un masque de saisie beaucoup plus complexe:

<input type="text" id="salary"
    dnr-input-mask="{'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': true, 'placeholder': '0'}"
    model="employee.salary">

Donc, la conclusion: AngularUI a encore un long chemin à parcourir pour satisfaire nos besoins. À ce moment, jQuery.inputmask continue de prospérer.

1
Blaise

J'ai partagé ce même problème avec vous. Il existe une fonctionnalité de caractère facultatif complètement non documentée pour ce composant. Je n'ai pu le trouver qu'en lisant le code source.

La solution pour votre masque serait: 

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

Les points d'interrogation dans votre masque marqueront le caractère suivant comme facultatif. Croyez-moi cela fonctionne.

Désolé de prendre si longtemps pour répondre.

22
Pedro Affonso
(999) 999-9999 ext. ?9?9?9

Cela fonctionnera bien, mais si vous voulez éliminer le flou et remettre le masque, vous avez besoin d’un peu plus, j’utilise

<input type='text'
  ng-model='customer.phone'
  ui-mask="{{phoneMask}}"
  ng-blur="removeMask()"
  ng-focus="placeMask()" />

Et dans mon contrôleur:

$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";
}

J'espère que ça va aider!

3
Ali Adravi

Une bonne solution à ce problème consiste à utiliser ngMask qui vous permet de faire exactement ce que vous voulez sans jQuery. Pour ce faire, ajoutez simplement un "?" après le caractère que vous voulez être facultatif:

mask="9?9999-9999

C'est idéal pour les entrées telles que les numéros de téléphone brésiliens, qui peuvent comporter 8 ou 9 caractères.

1
akz92