使用angular-ui-mask实现SSN前5位掩码切换的异常问题

看起来你遇到的问题是手动修改$viewValue被ui-mask的自动渲染逻辑覆盖了，再加上mask格式和模型值处理的偏差，导致显示不符合预期。咱们一步步来修复：

问题根源 #

1. 手动修改$viewValue无效：ui-mask会根据当前的uimaskpattern和ng-model的值自动生成输入框的显示内容，你在ng-blur里直接给$viewValue赋值的操作会被ui-mask的后续渲染覆盖——这就是为什么打印的字符串正确，但输入框最终显示不对的原因。
2. mask格式错误：你的applymask()方法把mask改成了手机号格式的999-999-9999，但SSN的正确格式应该是999-99-9999，这会导致聚焦时的显示格式不符合需求。
3. 模型值可能包含分隔符：如果模型值里保留了横杠，切片逻辑会拿到错误的字符片段，进一步加剧显示异常。

修复方案 #

1. 修正聚焦时的mask格式

把applymask()里的mask改成SSN的正确格式：

// 输入框获焦时显示完整SSN格式
public applymask() { 
  this.uimaskpattern = "999-99-9999"; 
}

2. 重构失焦逻辑，放弃手动修改$viewValue

让ui-mask自己处理显示，我们只需要切换mask并确保模型值是纯数字（不含分隔符）：

// 输入框失焦时切换为隐藏格式
public removemask() { 
  const ssn = this.contact.contactDetails.attributeDetails.contact;
  if (ssn) { 
    // 先把模型值转为纯数字（去掉所有横杠）
    const pureSsn = ssn.replace(/-/g, '');
    this.contact.contactDetails.attributeDetails.contact = pureSsn;
    // 切换为隐藏前5位的mask
    this.uimaskpattern = "XXX-XX-9999"; 
  } 
}

3. 更新HTML中的ng-blur绑定

不需要再传递参数和修改$viewValue，直接调用方法即可：

<input class="btnDropdown" 
       id="phoneTextInput" 
       ui-mask="{{uimaskpattern}}" 
       ui-mask-placeholder-char="" 
       ng-focus="applymask()" 
       ng-blur="removemask()" 
       md-minlength="9" 
       md-maxlength="9" 
       name="Phone_{{$index}}" 
       ng-model="contact.contactDetails.attributeDetails.contact">

注意：SSN是9位数字，所以把md-minlength和md-maxlength改成9更准确。

4. 设置初始mask状态

页面加载时如果输入框未获焦，应该默认显示隐藏格式，所以在组件初始化时设置：

ngOnInit() {
  this.uimaskpattern = "XXX-XX-9999";
}

为什么这样能解决问题？ #

当失焦时，我们确保模型值是纯9位数字，然后切换mask为XXX-XX-9999，ui-mask会自动把前5位数字替换成X，后4位保留原数字，正好符合你想要的XXX-XX-6789效果。同时避免了手动修改$viewValue被覆盖的问题，完全利用ui-mask的原生渲染逻辑。

内容的提问来源于stack exchange，提问作者user3497581