Prime Community Forum

Posted: **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>

Posted: **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?

Posted: **09 Sep 2019, 13:16**

Can you please report that issue here: https://github.com/primefaces-extension ... com/issues

Posted: **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>

Prime Community Forum

New Component: InputPhone

New Component: InputPhone

Re: New Component: InputPhone

Re: New Component: InputPhone

Re: New Component: InputPhone