Number keyboard without pattern in angular

Question

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

Answer 1

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