Маска первых 5 символов SSN при использовании angular-ui-mask

Question

Я использую angular-ui-mask для отображения ssn в этом формате 123-45-6789, но я также хочу скрыть первые 5 символов, когда поле ввода теряет фокус, и отображать все цифры, когда поле ввода получает фокус.

Мой 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">

Угловой код:

Начальное значение 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;
    }
}

Проблема, с которой я столкнулсяв случае размытия, если пользователь вводит 123456789, то при размытии текст становится XXX-XX-1234 вместо XXX-XX-6789, т.е. вместо 6789, добавленные цифры являются первыми 4, если я просто печатаю возвращенную строкус {{}} он отображается правильно

Answer 1

измените ng-blur как показано ниже

ng-blur="removemask(contact.contactDetails.attributeDetails.contact)"

и удалите функцию маски следующим образом и проверьте сейчас. Это может сработать

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