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?

Did you ever find a solution for this? – beaudetious Sep 04 '20 at 15:22 — beaudetious, Sep 04 '20 at 15:22
@beaudetious I've added my solution as answer – Faizan Saiyed Sep 07 '20 at 04:49 — Faizan Saiyed, Sep 07 '20 at 04:49

score 2 · Accepted Answer · answered Sep 07 '20 at 04:49

@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

NGX-Mask multiple masking on single input

1 Answers1