Input type="tel" validation issue

ionic-v1
1

I wanna show the phone like keyborad, I’m trying follow this site http://mobileinputtypes.com/ 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"
                            ng-maxlength="10"
                            name="userPhone"
                            id="userPhone"
                            type="tel"
                            ng-model="user.phone"
                            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>
                </div>

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
2

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,
Irena

3

Chris

If you are still looking for a solution, I ended up using ui-mask directive which is part of angular-ui-utils. See http://www.ng-newsletter.com/posts/angular-ui-utils.html for more details.

Irena

4

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.