如何为ngx-mask 14.2.4配置符合规则的通用邮编输入掩码？

针对ngx-mask 14.2.4版本的邮编输入规则需求，你可以通过调整自定义正则模式、掩码配置以及长度限制属性来实现，具体如下：

核心配置说明 #

1. 长度控制：直接使用ngx-mask的minLength和maxLength属性，精准限制输入字符数在2-12之间，无需在掩码中写固定长度。
2. 字符规则：自定义正则模式，同时满足允许字母/数字/空格/短横线，且空格不能出现在短横线之后的要求。
3. 特殊字符处理：将短横线标记为特殊字符，确保ngx-mask正确识别并允许输入。

完整代码实现 #

模板代码 #

<input
  type="text"
  [mask]="mask"
  [patterns]="customPatterns"
  [specialCharacters]="['-']"
  [showMaskTyped]="false"
  [dropSpecialCharacters]="false"
  [minLength]="2"
  [maxLength]="12"
/>

组件逻辑代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-postal-code-input',
  templateUrl: './postal-code-input.component.html'
})
export class PostalCodeInputComponent {
  mask = 'P*';
  customPatterns = {
    'P': { 
      pattern: new RegExp(/[A-Za-z0-9 ]|-(?!.* )/),
      optional: false
    }
  };
}

关键细节解释 #

• 掩码P*：使用自定义的P模式匹配任意数量的符合规则的字符，数量由minLength和maxLength约束。
• 正则表达式：/[A-Za-z0-9 ]|-(?!.* )/分为两部分：
  • [A-Za-z0-9 ]：匹配字母、数字和空格
  • -(?!.* )：匹配短横线，同时通过负向预查(?!.* )确保短横线之后不会出现任何空格
• specialCharacters: ['-']：将短横线标记为特殊字符，避免被ngx-mask当作掩码占位符处理
• showMaskTyped: false：关闭掩码占位符显示，用户输入的内容直接展示
• dropSpecialCharacters: false：保留输入的短横线和空格，不自动过滤

原配置问题分析 #

1. 原掩码0{12}是固定12位长度，不符合2-12的动态长度要求
2. 自定义正则中的转义字符错误（\[应改为[），且未限制空格不能出现在短横线之后
3. 同时将短横线加入specialCharacters和自定义pattern，导致ngx-mask无法正确识别短横线的输入规则

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