NGX-Mask multiple masking on single input

Question

I want to have multiple masking for zip code input to accept either 5 or 9 digits. If zipcode entered is 9 digit, it should automatically add hyphen(-) in the input.

I tried optional masking(AAAAA-?A?A?A?A also tried AAAAA-A?A?A?A?) as they said in some of the closed issues on their repo, but didn't worked. There isn't any official documentation for optional characters.

Any other way to do so?

Answer 1

@beaudetious I merged two validatiors. 1. NGX-Mask and 2. HTML Pattern validator

My template 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>

Pattern constant: pattern: '^\\d{5}(\\d{4})?$'

Mask Format : optionalMask: 'AAAAA-AAAA'

I have common app-err-msg component to display errors on control.

For NGX-Mask error, you will get: postalInput?.errors?.mask