DxRegExMaskProperties Class

Defines properties for Regular Expression masks.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxRegExMaskProperties :
    DxMaskPropertiesBase

Remarks

Use this class’s properties to set up the Masked Input component with a Regular Expression mask applied.

Customize Placeholders

The default placeholder character is an underscore (_). To display a different character, change the Placeholder property value.

<DxMaskedInput @bind-Value="Value"
               Mask="[A-Z]{3}-[0-9]{2}"
               MaskMode="@MaskMode.RegEx">
    <DxRegExMaskProperties Placeholder="Placeholder" />
</DxMaskedInput>

@code{
    String Value { get; set; }
    char Placeholder = '#';
}

To hide placeholders, set the PlaceholdersVisible to false.

Autocomplete Modes

Use the MaskAutoCompleteMode property to enable automatic value completion.

<DxMaskedInput @bind-Value="Value"
               Mask="\R{MonthNames}"
               MaskMode="MaskMode.RegEx">
    <DxRegExMaskProperties MaskAutoCompleteMode="MaskAutoCompleteMode.Optimistic" />
</DxMaskedInput>

@code{
    string Value { get; set; }
}

If enabled, the editor suggests possible values to complete a partial value. The following autocomplete modes are supported:

Autocomplete mode	Description
Strong (default)	Each time a user types a character, the editor determines if the following placeholder can be filled. If only one character matches the mask, the editor displays this character and moves the caret forward. For example, if a user types the letter `M` in an editor whose mask is `\R{MonthNames}`, the editor automatically displays the letter `a` after it because March and May start with the letter `M`, and the second letter is ‘a’ in both cases. If a user adds `r` to the editor’s value, the component completes the input and displays `March`:
Optimistic	When a user enters a character in the empty edit box for the first time, the editor fills all the placeholders with the default values. `0` is the default character for placeholders that accept numeric values. For placeholders that accept letters, `a` is the default character. For example, if a user types the letter `M` in an editor whose mask is set to `\R{MonthNames}`, the editor completes the value and sets it to `May`. Only ‘March’ and ‘May’ are possible completions and the editors selects the shorter alternative. The control also selects the letter ‘y’ so that a user can change it: Another example is when the mask is set to `\d{3}-\d{2}-\d{2}` (a telephone number pattern) and a user enters a number (for instance, `1`) in the empty edit box. The editor fills the following placeholders with the default values (`0` characters) and selects them:
None	The autocomplete feature is disabled. A user should type each character into the edit box.

Autocomplete mode

Description

Strong (default)

Each time a user types a character, the editor determines if the following placeholder can be filled. If only one character matches the mask, the editor displays this character and moves the caret forward.

For example, if a user types the letter M in an editor whose mask is \R{MonthNames}, the editor automatically displays the letter a after it because March and May start with the letter M, and the second letter is ‘a’ in both cases.

Regular Expression Masks - Strong Autocompletion Mode

If a user adds r to the editor’s value, the component completes the input and displays March:

Regular Expression Masks - Strong Autocompletion Mode

Optimistic

When a user enters a character in the empty edit box for the first time, the editor fills all the placeholders with the default values. 0 is the default character for placeholders that accept numeric values. For placeholders that accept letters, a is the default character.

For example, if a user types the letter M in an editor whose mask is set to \R{MonthNames}, the editor completes the value and sets it to May. Only ‘March’ and ‘May’ are possible completions and the editors selects the shorter alternative. The control also selects the letter ‘y’ so that a user can change it:

Regular Expression Masks - Optimistic Autocompletion Mode

Another example is when the mask is set to \d{3}-\d{2}-\d{2} (a telephone number pattern) and a user enters a number (for instance, 1) in the empty edit box. The editor fills the following placeholders with the default values (0 characters) and selects them:

Regular Expression Masks - Optimistic Autocompletion Mode