Цифровая клавиатура без шаблона в угловом

Я использую NgX-Mask, чтобы замаскировать поле ввода. Я хочу включить в маску специальные символы, поэтому я использовал [dropSpecialCharacters]="false" из NgXMask.

Из-за угловой проверки он показывает красный индикатор, поскольку шаблон не соответствует. В настоящее время шаблон использует \d*

<input pattern="\d*" [dropSpecialCharacters]="false" mask="H0:00" placeholder="HH:MM" required
class="form-control" [(ngModel)]="inputValue" name="inputValue" />

Критерии приемлемости
1 В Safari по умолчанию должна отображаться цифровая клавиатура. (input pattern="\d*"), который по умолчанию показывает цифровую клавиатуру.

Ожидаемый результат
Я хочу включить в шаблон символ ':', чтобы он отображал зеленый индикатор

Пример StackBlitz

Поддерживаемое приложение: только для iPad

Обновить Этот шаблон будет соответствовать моему вводу ^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
но как мне добавить цифровую клавиатуру


person Eldho    schedule 11.11.2019    source источник


Ответы (1)


Я нашел решение, которое решает обе мои проблемы.

Используется regexlib.com и другой RexExTool для помощников регулярных выражений.

Использовал это регулярное выражение для проверки моего ввода
^([0-1][0-9]|[2][0-3]):([0-5][0-9])$

Используется цифровой режим ввода для цифровой клавиатуры на iPad.
inputmode="numeric"

 <input inputmode="numeric" pattern="^([0-1][0-9]|[2][0-3]):([0-5][0-9])$"
  [dropSpecialCharacters]="false" mask="H0:00" placeholder="HH:MM" required
  class="form-control" [(ngModel)]="inputValue" name="inputValue" />

Пример StackBlitz
1. Это первое текстовое поле с недопустимым значением и текстовой клавиатурой
2. Второе текстовое поле с допустимым вводом и цифровой клавиатурой.

person Eldho    schedule 12.11.2019