How to change the mask in Syncfusion Blazor SfMaskedTextBox?

When working with the Syncfusion Blazor SfMaskedTextBox, it’s common to require a dynamic mask that adjusts based on user input or selections. This is particularly useful when dealing with international formats, such as phone numbers, where the country code may change. Below is a guide on how to dynamically change the mask for the SfMaskedTextBox component in a Blazor application.

Implementation

The implementation uses Syncfusion Blazor components to create a SfMaskedTextBox with a predefined format and a SfDropDownList populated with countries. The ValueChange event of the dropdown dynamically updates the mask based on the selected country’s code.

@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.DropDowns

<h2>Input Mask:</h2>
<div class="component-container">
    <SfMaskedTextBox @ref="MaskedTextBox" Mask="@MaskValue"></SfMaskedTextBox>
</div>
<h2>Dropdown List:</h2>
<div class="component-container">
    <SfDropDownList TItem="Countries" TValue="string" DataSource="@Country">
        <DropDownListEvents TItem="Countries" TValue="string" ValueChange="@ValueChangeHandler"></DropDownListEvents>
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
</div>

@code {
    SfMaskedTextBox MaskedTextBox;
    public class Countries
    {
        public string ID { get; set; }
        public string Text { get; set; }
    }
    public string MaskValue { get; set; } = "+\\9\\1-####-###-###";
    private List<Countries> Country = new List<Countries>() {
        new Countries() { ID = "91", Text = "India" },
        new Countries() { ID = "01", Text = "United States" },
        new Countries() { ID = "44", Text = "United Kingdom" },
        new Countries() { ID = "61", Text = "Australia" }
    };
    private void ValueChangeHandler(ChangeEventArgs<string, Countries> args)
    {
        string NewText = args.Value;
        // Determine the new mask based on the selected value
        if (!string.IsNullOrEmpty(NewText) && NewText.Length >= 2)
        {
            MaskValue = $"+\\{NewText[0]}\\{NewText[1]}-####-###-###";
        }
    }
}

To see a working example of the dynamic mask change, you can download the sample project from the link below:

• Input Mask Sample

Additional References

• Syncfusion Blazor SfMaskedTextBox Documentation: SfMaskedTextBox API Reference

Conclusion
We hope you enjoyed learning about how to change the mask in Syncfusion Blazor SfMaskedTextBox.

You can refer to our Blazor Input Mask feature tour page to know about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Input Mask example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor SfMaskedTextBox and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!