Множественное маскирование NGX-Mask на одном входе

Я хочу иметь множественную маскировку для ввода почтового индекса, чтобы принимать 5 или 9 цифр. Если введенный почтовый индекс состоит из 9 цифр, он должен автоматически добавлять дефис (-) во входные данные.

Я попробовал дополнительное маскирование (AAAAA-? A? A? A? A также попробовал AAAAA-A? A? A? A?), Как они сказали в некоторых закрытых выпусках своего репо, но не сработало. Официальной документации по необязательным символам нет.

Есть другой способ сделать это?


angular mask ngx-mask
person Faizan Saiyed    schedule 10.08.2020    source источник
comment
Вы когда-нибудь находили для этого решение?   -  person beaudetious    schedule 04.09.2020
comment
@beaudetious Я добавил свое решение в качестве ответа   -  person Faizan Saiyed    schedule 07.09.2020

Ответы (1)


arrow_upward
2
arrow_downward

@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

person Faizan Saiyed    schedule 07.09.2020