IntlTelInput.MudBlazor 2.0.0

dotnet add package IntlTelInput.MudBlazor --version 2.0.0                
NuGet\Install-Package IntlTelInput.MudBlazor -Version 2.0.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="IntlTelInput.MudBlazor" Version="2.0.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add IntlTelInput.MudBlazor --version 2.0.0                
#r "nuget: IntlTelInput.MudBlazor, 2.0.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install IntlTelInput.MudBlazor as a Cake Addin
#addin nuget:?package=IntlTelInput.MudBlazor&version=2.0.0

// Install IntlTelInput.MudBlazor as a Cake Tool
#tool nuget:?package=IntlTelInput.MudBlazor&version=2.0.0                

International Telephone Input Blazor wrapper

International Telephone Input js library wrapper for Blazor serverside and clientside. Most of the features are supported, but there are some that I have not implemented! If you would like to add them feel free to do so.

Not supported features:

  • Custom dropdownContainer
  • CustomPlaceholder
  • GeoIpLookup
  • hiddenInput
  • Setters for properties that are configured during initialization
  • And some more advanced features such as events

Installation

  1. Add the nuget package
  2. Add JS (just copy this)
     <script src="./_content/IntlTelInputBlazor/js/intlTelInput.js"></script>
    
  3. Link CSS (just copy this)
     <link rel="stylesheet" href="./_content/IntlTelInputBlazor/css/intlTelInput.css">
    
  4. Register dependencies using IServiceCollection.RegisterIntlTelInput();
    builder.Services.RegisterIntlTelInput();
    
  5. Profit $$$

Validation

A custom validation attribute is included, see the example below. It is important to note that the included validation attribute works by calling the International Telephone Input library. More specifically isValidNumber method.

Example

img.png

<EditForm EditContext="_editContext" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator/>
<ValidationSummary/>

    <label>Nr. 1:</label>
    <IntPhoneNumberInput @bind-Value="_model.IntTelNumber"/>
    
    <label>Nr. 2:</label>
    <IntPhoneNumberInput @bind-Value="_model.IntTelNumber2"/>
    <button class="btn-primary">Submit</button>
</EditForm>
@code
{
   NumberModel _model = new NumberModel();
   EditContext _editContext;
   
   protected override void OnInitialized()
   {
      _editContext = new EditContext(_model);
   }
   
   private void OnValidSubmit()
   {
      var tel1 = _model.IntTelNumber.Number;
      var tel2 = _model.IntTelNumber2.Number;
      Console.WriteLine($"Number 1: {tel1}; Number 2: {tel2}");
   }
}

public class NumberModel
{
   [IntlTelephone(ErrorMessage = "Tel. 1 incorrect format")]
   public IntlTel IntTelNumber { get; set; }
   
   [IntlTelephone(ErrorMessage = "Tel. 2 incorrect format")]
   public IntlTel IntTelNumber2 { get; set; }
}
Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
2.0.0 998 9/12/2024
1.5.0 1,583 2/7/2024
1.4.0 131 1/31/2024
1.3.3 3,658 1/31/2024
1.3.2 5,238 8/3/2023
1.3.1 177 8/3/2023
1.3.0 165 8/3/2023

Support latest version of MudBlazor