Input type="tel" validation issue

I wanna show the phone like keyborad, I’m trying follow this site the type=“tel”.

the code

<div class="form-group has-feedback" ng-class="regForm.userPhone.$valid ? 'has-success' : 'has-warning'">
                    <label class="control-label" for="userPhone">{{ 'REG_PHONE_HOLDER' | translate }}</label>
                    <input class="form-control ng-invalid ng-invalid-required"
                            required />
                    <span ng-show="!regForm.userPhone.$valid" class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                    <span class="glyphicon glyphicon-ok form-control-feedback" ng-show="regForm.userPhone.$valid"></span>

Like this the validation didn’t work. If I change type to number it’s work fine, but the keyborad didn’t like tel feel and the number field cannot fill in the “-” like this 852-123456-45688.

I’m using Ionic, v1.0.0-beta.12

1 Like

Hi Chris
Were you able to resolve this issue? Looking for strategy to phone input fields. Used teljs, however it does not work on device itself.
Thank you,


If you are still looking for a solution, I ended up using ui-mask directive which is part of angular-ui-utils. See for more details.


That’s great, however, don’t you think that using additional library in mobile will make our app a bit bulky? I already have to use some of then, now just for making I don’t want to add new one. Kindly suggest.