Search code examples
htmlangularregexinputngx-mask

Number keyboard without pattern in angular

I'm using NgX-Mask to mask my input box. I want to include special characters in the mask so i have used [dropSpecialCharacters]="false" from the NgXMask.

Because of angular validation it showing red indicator as pattern is not matched. Pattern currently using \d*

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

Acceptance Criteria
1 In Safari it should show number keyboard by default. (input pattern="\d*") which shows number keyboard by default.

Expected Result
I want to include the ':' character to the pattern so it shows green indicator

StackBlitz Example

App Supported : IPad Only

Update This pattern will match my input ^([0-1][0-9]|[2][0-3]):([0-5][0-9])$
but how will i bring the Number keyboard

Solution

  • I have found a solution which solve both my problem.

    Used regexlib.com and another RexExTool for RegEx Helpers.

    Used this regEx to validate my input
    ^([0-1][0-9]|[2][0-3]):([0-5][0-9])$

    Used input mode to numeric for number keyboard in 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 Example
    1. This first text box with invalid value and text keyboard
    2. The second text box with valid input and number keyboard