New Component: InputPhone

Community Driven Extensions Project
Post Reply
Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

27 Feb 2019, 15:40

Available in PFE 7.0. Input for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.

Based on: https://github.com/jackocnr/intl-tel-input

usage:

Code: Select all

    
<pe:inputPhone id="txtPhone" 
                   initialCountry="us"
                   value="#{basicInputPhoneController.phoneNumber}"
                   formatOnDisplay="true">
        <p:ajax event="countrySelect" listener="#{basicInputPhoneController.onCountrySelect}"/>
</pe:inputPhone>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

djmj
Posts: 400
Joined: 16 Dec 2011, 01:23

09 Sep 2019, 01:48

Thanks for the great control and its very usefull in many projects.

But there is a small bug in the showcase:

When i select germany as a country and input a number and submit the form the submitted value is correct (as shown in message).
But then the US flag is selected automatically?
Primefaces: 11.0.0 RC2
Primefaces-Extension: 11.0.0
PrimeFaces-Mobile: 11.0
OmniFaces: 3.11
Jsf: Mojarra 2.3.8
Server: Glassfish 5.1.0

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

09 Sep 2019, 13:16

Can you please report that issue here: https://github.com/primefaces-extension ... com/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

jepsar
Posts: 166
Joined: 03 Sep 2014, 11:41
Location: NL / BE
Contact:

08 Nov 2019, 11:17

It must be a matter of using the right settings. For me it doesn't fallback to US. Here is what I'm using:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

  <c:set var="rendered" value="#{empty rendered or rendered}" />
  <c:set var="required" value="#{not empty required and required}" />
  <c:set var="disabled" value="#{not empty disabled and disabled}" />
  <c:set var="maxlength" value="#{empty maxlength ? 27 : maxlength}" />

  <pe:inputPhone id="#{id}"
                 widgetVar="#{id}"
                 value="#{bean[id]}"
                 nationalMode="false"
                 initialCountry="#{user.countryIso2}"
                 placeholder=" "
                 onchange="this.value=PF('#{id}').getNumber();"
                 required="#{required}"
                 disabled="#{disabled}"
                 maxlength="#{maxlength}">
    <f:converter converterId="phoneE164" />
    <ui:insert />
  </pe:inputPhone>

</ui:composition>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub: https://github.com/jepsar
Spotify: 90s Rave, Acid, Trance, House

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests