Angular 11 ngx-mask 中 UI 已掩码但 FormGroup 值未格式化

ngx-mask 默认采用「视图展示与表单数据分离」的设计：mask、showMaskTyped 配置仅作用于输入框 DOM 层，控制界面显示效果；同步到响应式表单 FormControl 的值默认会过滤掩码内置的特殊分隔符（如 /、-），仅保留有效输入字符，因此通过 this.createForm.value 拿到的是不带格式的原始值，属于库的默认逻辑，并非配置错误。

给掩码输入框添加 dropSpecialCharacters 输入属性并设为 false。该属性默认值为 true（自动过滤特殊分隔符），关闭后会将输入框内展示的完整带格式内容直接同步到表单控件中。

修改后的模板代码：

<!-- 出生日期字段 -->
<input 
  type="text" 
  class="form-control" 
  mask="d0/M0/0000" 
  [leadZeroDateTime]="true" 
  [showMaskTyped]="true"
  [dropSpecialCharacters]="false"
  required 
  formControlName="dateOfBirth" 
/>

<!-- 手机号字段 -->
<input 
  type="text" 
  class="form-control" 
  id="mobile-phone" 
  mask="0000-0000" 
  [showMaskTyped]="true"
  [dropSpecialCharacters]="false"
  required 
  formControlName="mobilePhone" 
/>

配置后表单值输出效果：

• dateOfBirth：格式类似 01/05/1995，保留 / 分隔符与自动补全的前导零
• mobilePhone：格式类似 1380-0138，保留 - 分隔符

如果项目内所有掩码字段都需要保留格式，可以在模块导入时通过根配置统一设置，无需逐个添加属性：

// 对应模块的 imports 数组中
NgxMaskModule.forRoot({
  dropSpecialCharacters: false // 全局保留掩码特殊字符
})

• 如果后端要求传输不带分隔符的裸值，不建议直接修改表单存储值，可在提交接口前手动去除分隔符，或通过掩码服务单独生成格式化值。
• 修改后若字段配置了正则校验、长度校验，需同步调整校验规则，适配带分隔符的完整字符串。

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