IntlTelInput.MudBlazor
2.0.0
dotnet add package IntlTelInput.MudBlazor --version 2.0.0
NuGet\Install-Package IntlTelInput.MudBlazor -Version 2.0.0
<PackageReference Include="IntlTelInput.MudBlazor" Version="2.0.0" />
paket add IntlTelInput.MudBlazor --version 2.0.0
#r "nuget: IntlTelInput.MudBlazor, 2.0.0"
// 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
- Add the nuget package
- Add JS (just copy this)
<script src="./_content/IntlTelInputBlazor/js/intlTelInput.js"></script>
- Link CSS (just copy this)
<link rel="stylesheet" href="./_content/IntlTelInputBlazor/css/intlTelInput.css">
- Register dependencies using IServiceCollection.RegisterIntlTelInput();
builder.Services.RegisterIntlTelInput();
- 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
<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 | Versions 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. |
-
net8.0
- Microsoft.AspNetCore.Components.Web (>= 8.0.8)
- MudBlazor (>= 7.8.0)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Support latest version of MudBlazor