Back to Devexpress

DxRegExMaskProperties Class

blazor-devexpress-dot-blazor-5aa66ed8.md

latest4.8 KB
Original Source

DxRegExMaskProperties Class

Defines properties for Regular Expression masks.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
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.

razor
<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.

razor
<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.

|

Implements

IComponent

IHandleEvent

IHandleAfterRender

Inheritance

Object ComponentBase DxMaskPropertiesBase DxRegExMaskProperties

See Also

DxRegExMaskProperties Members

DevExpress.Blazor Namespace