Im using angular-ui-mask to display ssn in this format 123-45-6789, but i also want to hide the first 5 characters when input box loses focus and show all digits when input box gains focus.
My HTML
<input class="btnDropdown"
id="phoneTextInput"
ui-mask="{{uimaskpattern}}"
ui-mask-placeholder-char=""
ng-focus="applymask()"
ng-blur="phoneForm['Phone_'+$index].$viewValue = removemask(contact.contactDetails.attributeDetails.contact)"
md-minlength="10"
md-maxlength="10"
name="Phone_{{$index}}"
ng-model="contact.contactDetails.attributeDetails.contact">
Angular Code:
Initial Value of uimaskpattern = "999-99-9999"
//When input gets focus
public applymask() {
this.uimaskpattern = "999-999-9999";
}
//When input loses focus
public removemask(ssn) {
if (ssn) {
console.log(ssn);
this.uimaskpattern = "XXX-XXX-9999";
let formstring = 'XXX-XXX-'+ssn.slice(6, ssn.length);
console.log(formstring);
return formstring;
}
}
The issue i'm facing is that on blur, If user enters 123456789, then on blur the text becomes XXX-XX-1234, instead of XXX-XX-6789, ie instead of 6789, the appended digits are the first 4, If I just print the returned string with {{}}, it is getting displayed properly
change ng-blur as below
ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"
and remove mask function as follows and check now.It might work
public removemask(ssn) {
if (ssn) {
console.log(ssn);
this.uimaskpattern = "XXX-XXX-9999";
let formstring = 'XXX-XXX-'+ssn.slice(6, ssn.length);
console.log(formstring);
ssn=formstring;
}
}
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.