NGX-Mask 单输入多重掩蔽

Question

我想对邮政编码输入进行多重屏蔽以接受 5 位或 9 位数字。如果输入的邮政编码是 9 位数字，它应该在输入中自动添加连字符 (-)。

我尝试了可选的掩码（AAAAA-？A？A？A？A 也尝试了 AAAAA-A？A？A？A？），正如他们在回购协议的一些已关闭问题中所说的那样，但没有工作了。没有关于可选字符的任何官方文档。

还有其他方法吗？

Answer 1

@beaudetious 我合并了两个验证器。 1. NGX-Mask 和 2. HTML 模式验证器

我的模板HTML:

<input
  type="text"
  class="form-control"
  name="postal"
  #postalInput="ngModel"
  [(ngModel)]="postalCode"
  [mask]="zipCode?.optionalMask"
  [validation]="false"
  [pattern]="zipCode?.pattern"
  [required]="isRequiredInformation"
/>
<app-err-msg
  [isFormSubmitted]="addInsuranceCarrierForm?.submitted"
  [control]="postalInput"
  fieldName="{{ insuranceCarrierMessage?.postalCode }}"
></app-err-msg>
<span class="text-danger f-s-13" *ngIf="postalInput?.errors && postalInput?.errors?.pattern">
  Invalid postal code (eg. XXXXX-XXXX)
</span>

模式常量：模式：'^\d{5}(\d{4})?$'

掩码格式：optionalMask: 'AAAAA-AAAA'

我有通用的 app-err-msg 组件来显示控件上的错误。

对于 NGX-Mask 错误，您将得到：postalInput?.errors?.mask

NGX-Mask 单输入多重掩蔽

NGX-Mask multiple masking on single input

angular

mask

ngx-mask