Angular UI Mask for SSN on blur
Question
Im using angular-ui-mask for SSN, the initial ui-mask is "999-99-9999", but on blur I need to display the SSN 123-45-6789 characters as XXX-XX-6789.
I tried setting ui-mask as XXX-XX-9999 but it's showing the first 4 digits of the SSN at the end of 'XXX-XX-' instead of the last four digits.
Here's the HTML Code
<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="">
Here's the Typescript code
public applymask() {
this.uimaskpattern = "999-99-9999";
}
public removemask(ssn, ev) {
if (ssn) {
console.log(ssn);
this.uimaskpattern = "AAA-AA-9999";
}
}
2 answers
solution1
0 2018-05-29 07:07:13
There is a plugin for jQuery called jquery.maskedinput that might be of help here.
You can use this plugin to mask the input by creating a custom directive and invoking the library within it. Here's a working example that should mask the input when the input field loses focus:
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>
solution2
0 2018-05-29 07:20:52
This might also be an approach to try - although it's Angular 1.x style - so there's probably a more current / Angular 2 way to do this.
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;
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.