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