Маска Входное значение Дата Формат Угловой - PullRequest
Новая
       11

Маска Входное значение Дата Формат Угловой

1 голос
/ 12 октября 2019

Я хочу замаскировать свое значение input, в основном у меня есть поле ввода для даты истечения срока действия кредитной карты и я хочу замаскировать его в формате mm/yy, вот что я пробовал:

input-mask.directive.ts 

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName][appInputMask]',
})
export class InputMaskDirective {

  @HostListener('input', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    const input = event.target as HTMLInputElement;

    const trimmed = input.value.replace(/\s+/g, '').slice(0, 4);
    if (trimmed.length > 3) {
      return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);
    }
  }
}

Я получил ожидаемый результат, но проблема в том, что при использовании backspace в поле ввода, это не так, вот моя демонстрация на stackblitz, как это решить? или есть ли лучший подход к маске ввода?

Ответы [ 2 ]

2 голосов
/ 12 октября 2019

Проблемы

  1. Максимальная длина элемента HTMLInput должна быть 5, в противном случае пользователь не сможет добавить 4 цифры после программного добавления косой черты.

  2. Та же проблема существует в const trimmed = input.value.replace(/\s+/g, '').slice(0,4); Если он содержит косую черту, срез должен заканчиваться на 5 вместо 4.

  3. В return выражение 

    return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);

Если косая черта добавлена ​​один раз, ${trimmed.slice(2) вернет /\d{1,2}. Поэтому вам нужно избегать косой черты и начинать с 3.

Решение

изменить максимальную длину до 5 с 4 

 <input ... maxlength="5">

Now, input-mask.directive.ts необходимо внести некоторые изменения

Изменить 

const trimmed = input.value.replace(/\s+/g, '').slice(0,4);

на 

const trimmed = input.value.replace(/\s+/g, '').slice(0, input.value.indexOf('/')==-1?4:5);

Поскольку при добавлении / длина станет 5.

Не используйте .slice(0), потому что он позволяет пользователю вставлять 5 цифр, а когда вы добавляете косую черту, он становится 6. Таким образом, дата будет выглядеть как 11/111 вместо 11/11

Измените 

return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);

на 

return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);

Здесь ваш код испортился. Если он содержит косую черту, то вы должны нарезать его с 3. Иначе нарезать его с 2.

конечный код HostListener в директиве input-mask 

@HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) {
  const input = event.target as HTMLInputElement;

  const trimmed = input.value.replace(/\s+/g, '').slice(0, input.value.indexOf('/')==-1?4:5);
  if (trimmed.length > 3) {
    return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);
  }
}

Рабочий пример: stackblitz

0 голосов
/ 12 октября 2019

Использование ngx-mask упростит вашу работу, просто указав шаблон даты, карты и т. Д.

<input type='text' mask='99/99' >

Здесь stackblitzдемо

...