Devextreme Include Mask Characters In Mask Value

4 min read Oct 02, 2024

Devextreme Include Mask Characters In Mask Value

Want to include Mask Characters in Your DevExtreme Mask Value?

DevExtreme's masking feature is incredibly powerful, allowing you to format your inputs in a structured way. But what if you need to include the mask characters themselves as part of the actual value? This is a common scenario, especially when dealing with things like phone numbers or credit card numbers.

Let's delve into how to accomplish this in DevExtreme.

The Challenge of Including Mask Characters

The default behavior of DevExtreme's masking is to use mask characters as placeholders, guiding the user to input the correct format. These characters are not meant to be part of the final value.

For example:

Imagine you have a mask for a phone number: (999) 999-9999. The user will enter the numbers, and DevExtreme will handle the formatting, creating a visually appealing phone number. However, when you submit the form, you might need the complete string including the parentheses, spaces, and hyphen.

The Solution: Customizing the Mask Behavior

DevExtreme allows you to customize how the mask behaves. Here's how you can include mask characters in the value:

Use the mask Property:
- Start by defining your mask in the mask property of your DevExtreme input widget.
- Utilize special mask characters to represent the structure you need.
```
{
  mask: "(999) 999-9999"
}
```
The showMaskCharacters Property:
- This is the key! By setting showMaskCharacters to true you tell DevExtreme to include the mask characters in the final value.
```
{
  mask: "(999) 999-9999",
  showMaskCharacters: true
}
```
See It in Action:

Now, when a user enters 1234567890 into the input field, the value submitted will be (123) 456-7890, including the parentheses, space, and hyphen.

Important Notes:

Data Validation: Be mindful of the data validation you have in place. You might need to adjust your validation rules to account for the mask characters.
Alternative Approaches: For more complex scenarios, consider utilizing the onValueChanged event handler of the DevExtreme input widget to programmatically modify the value before submission.

Conclusion

Including mask characters in the DevExtreme mask value is a valuable customization that allows you to work with structured data more efficiently. Understanding the showMaskCharacters property and its usage is crucial when working with DevExtreme's masking features. Always tailor your mask to your specific needs and data requirements for a seamless user experience.