CODEWITHSUNDEEP
javascriptangularjsionic-frameworkangular-uiangularjs-ui-utils
HP.
HP.

Reputation: 19896

ui-utils phone mask does not work with Ionic input

I need to do phone mask (999) 999-9999 like this example http://angular-ui.github.io/ui-utils/ but for Ionic mobile app input.

The ui-utils works fine in bare AngularJS app: http://plnkr.co/edit/NozbdhtRjaxq1KFYrwLo?p=preview

  <body ng-controller="MainCtrl">
    <input type="text" ng-model="phonenumber" ui-mask="(999) 999-9999">
  </body>

However, the same is not working with Ionic: http://codepen.io/hawkphil/pen/qdxOLW?editors=101

<input type="text" placeholder="First Name" ui-mask="(999) 999-9999" ng-model="attendee.firstname">

enter image description here

  1. The placeholder got hijacked or something. How to fix the placeholder?

  2. Then when I enter some number, it all messed up and some placeholder text injected in it. How to fix?

  3. Alternatively, I don't need to use ui-utils just for one thing. Is there any phone mask alternative for Ionic? type=tel doesn't work for me as it only pops up the number keypad and nothing else.

I do have a need to show placeholder "Enter Phone Number". So showing (___) ___ ____ won't work

Upvotes: 1

Views: 3045

Answers (1)

Adrian Gois
Adrian Gois

Reputation: 1

Try <input type="text" placeholder="First Name" ui-mask="(999) 999-9999" ng-model="attendee.firstname" ui-mask-placeholder>. It's important the 'ui-mask-placeholder' for plugin understand this.

Upvotes: 0

Related Questions