Угловая маска UI для SSN на размытие - PullRequest
Новая
       22

Угловая маска UI для SSN на размытие

0 голосов
/ 29 мая 2018

Я использую angular-ui-mask для SSN, начальная ui-mask - "999-99-9999", но при размытии мне нужно отобразить символы SSN 123-45-6789 как XXX-XX-6789.

Я попытался установить маску ui как XXX-XX-9999, но он показывает первые 4 цифры SSN в конце «XXX-XX-» вместо последних четырех цифр.

Вот код HTML 

<input class="btnDropdown" id="phoneTextInput" ui-mask="{{uimaskpattern}}" ui-mask-placeholder-char=""
  ng-focus="applymask()"
  ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"

  md-minlength="10" md-maxlength="10" name="Phone_{{$index}}" ng-model="contact"
  placeholder="">

Вот код машинописного текста 

public applymask() {
    this.uimaskpattern = "999-99-9999";

}

public removemask(ssn, ev) {
    if (ssn) {
        console.log(ssn);
        this.uimaskpattern = "AAA-AA-9999";
    }
}

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Это также может быть подход, чтобы попробовать - хотя это стиль Angular 1.x - так что, вероятно, есть более актуальный / Angular 2 способ сделать это. 

HTML     
<input type="text"
       ng-model="data.ssnDisplay"
       ng-blur="blurFunction()">

JAVASCRIPT
// on page load
if (newUser === true) {
    $scope.data.ssn = ''
}
else {
// would normally be delivered via a service endpoint (hard coded here)
    $scope.data.ssn = '123456789'
}

// create display-only property
$scope.data.ssnDisplay = $scope.data.ssn;

// on blur, update display-only property
$scope.blurFunction = function () {
    $scope.data.ssnDisplay = 'XXXXX' + $scope.data.ssn.substring(5);
}

// always maintain primary ssn value - you'll need this when
// posting/saving your data back to your database
$scope.$watch("data.ssnDisplay", function () {
    $scope.data.ssn = $scope.data.ssnDisplay;
})
0 голосов
/ 29 мая 2018

Для jQuery существует плагин jquery.maskedinput , который может помочь здесь.

Вы можете использовать этот плагин для маскировки ввода, создав пользовательскую директиву и вызвав библиотеку внутри нее.Вот рабочий пример, который должен маскировать ввод, когда поле ввода теряет фокус: 

var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
  $scope.ssn = '';
});

app.directive("ssnMasker", function () {
    return {
        require: "ngModel",
        link: function (scope, elem, attr, ngModel) {
            $(elem).mask("999-99-9999");  // 9 represents a numeric character in this library
            var temp;
            var regxa = /^(\d{3}-?\d{2}-?\d{4})$/;  // regex to define formatting for a SSN
            
            $(elem).focusin(function () {
                $(elem).val(temp);
            });
            
            $(elem).on("blur",function () {
                temp = $(elem).val();
                if (regxa.test($(elem).val())) {  // check for match
                   $(elem).val("XXX-XX" + temp.slice(6));  // change displayed value
               }
            });
        }
    }
});
<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://cdn.rawgit.com/digitalBush/jquery.maskedinput/master/src/jquery.maskedinput.js"></script>
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    Type SSN: <input type="text" ng-model="ssn" ssn-masker >
    <p>Actual SSN: {{ ssn }} </p>
  </body>
</html>
...