I’m having a lot of fun with Ionic, and i might need some help on one element.
Inside an app i am experimenting, i need the user to enter a phone number, with international format.
Format that, a wonderful plugin exists with jQuery: https://github.com/Bluefieldscom/intl-tel-input
That plugin create a div with a list of country and flags, with allow the user to select his country, and fill the international prefix for the phone number. It creates a div behind the input field, with a scrollable ul list.
I need to use that within a ion-content, and within that context, the scroll within the plugin does not work. If i set the scroll property of the ion-content to false, then it works, but i also need to have the ion-content scrollable, with a pull-to-refresh functionality (in place with ion-refresher).
Is there a way to have a scrollable area, within a scrollable ion-content, with the html of the scrollable area, generated by a jQuery plugin? i’m struggling on that for quite a long time, and i have no clues, anyone would have an idea?
I’ve been reviewing the plugin you created and is very good, I would like to know how to get the value of the input. Now I call the model but returns “undefined”
The plugin is just doing what i needed at the time, i’m trying to add the national mode as well those days.
Normally it should work directly with the data binding of Angular, so you should be able to use it like that:
<intlpn ng-model="model.field" placeholder="Placeholder" default-country="fr" only-country="['fr','cn']" national-mode="false" ></intlpn>
value entered: {{model.field}}
However, the plugin is doing a validation as well, which means, if you enter for example a french phone number: +33 1 23 45 67 89 , you should see it in the model.field, however, if you enter a non valid phone +33123456 (missing digits), the validator will block it, and the value will not be passed to the model, in that case, you will probably have undefined
???