Country Configured Mobile Phone Input Mask

[Behzad]

Hi. I am looking for an intelligent mobile phone input control that sets the input mask based on the country code of the owner. Do you currently have something like this or something close to it?

[Prince Oliver]

Hi Bezhad, 

Greetings from Syncfusion support. 

Yes, we can achieve your requirement using the Mask property in the SfMaskedTextBox. We can dynamically modify the mask based on the country code selected in the dropdownlist. Kindly refer to the following code 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.DropDowns 

 

<div class="control-label"> 

    Country code 

</div> 

        <SfDropDownList TItem="CountryCode" TValue="string" PopupHeight="230px"  Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@codes" > 

            <DropDownListEvents TItem="CountryCode" TValue="string" ValueChange="OnChange"></DropDownListEvents> 

            <DropDownListFieldSettings Text="Code" Value="Code"></DropDownListFieldSettings> 

        </SfDropDownList> 

<div class="control-label"> 

    Mobile Number 

</div> 

<SfMaskedTextBox Mask="@mask"></SfMaskedTextBox> 

 

@code{ 

    public class CountryCode 

    { 

        public string Code { get; set; } 

        public string Mask { get; set; } 

    } 

    private List<CountryCode> codes = new List<CountryCode>() { 

        new CountryCode(){ Code= "+1", Mask= "000-000-0000" }, 

        new CountryCode(){ Code= "+44", Mask= "0000-000000" }, 

        new CountryCode(){ Code= "+91", Mask= "00000 00000" }, 

     }; 

    public string DropVal = "+1"; 

    public string mask = "000-000-0000"; 

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CountryCode> args) 

    { 

        this.mask = args.ItemData.Mask; 

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169048/ze/BlazorServerApp5.0-1055410289  

Reference: https://blazor.syncfusion.com/documentation/input-mask/mask-configuration 

Please let us know if you need any further assistance. 

Regards, 

Prince