DxMaskedInput<T>.Mask Property

Specifies a mask pattern.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string Mask { get; set; }

Property Value

Type	Description
String	A mask pattern string.

Remarks

The Masked Input component supports the following mask types:

• Date-time
• Date-time offset
• Time Span
• Numeric
• Text
• Regular Expression

Assign a mask pattern to the Mask property to apply a mask to the Masked Input component. The following code snippet applies a regular expression mask:

<DxMaskedInput @bind-Value="Value"
               Mask="\d{3,10}" 
               MaskMode="@MaskMode.RegEx">
    <DxRegExMaskProperties Placeholder="Placeholder" />
</DxMaskedInput>

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

Refer to the following section for additional information: Apply a Mask.

Input Validation

Refer to the following topics for base information about input validation:

• Data Editors - Validate Input
• Masks - Masked Editor Validation

Run Demo: Form Validation

You can add a standalone Masked Input or the Form Layout component to the Blazor standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.

Razor

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6" >
            <Template >
                <DxMaskedInput @bind-Value="@starship.Identifier" Mask=".{,16}" MaskMode="@MaskMode.RegEx" />
            </Template >
        </DxFormLayoutItem >
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship = new Starship();
}

Starship

using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16,
    ErrorMessage = "The Identifier exceeds 16 characters.")]
    public string Identifier { get; set; }
    // ...
}

Note that if the Mask property contains strongly required values, the input value is validated even if the corresponding model field does not have the Required data validation attribute. The following code specifies a mask for the EmployeePhone string field:

<EditForm Model="@Model" Context="EditFormContext">
    <DxFormLayout>
        <DxFormLayoutItem Caption="Employee Phone:" ColSpanMd="6">
            <Template>
                <DxMaskedInput @bind-Value="@EmployeePhone" 
                               Mask="[phone]" />
            </Template>
        </DxFormLayoutItem>
        @*...*@
    </DxFormLayout>
</EditForm>


@code {
    public string EmployeePhone { get; set; }
}

To disable input validation, set the MaskMode to RegEx and set the Mask property to a regular expression that accepts an empty string.

<EditForm Model="@Model" Context="EditFormContext">
    <DxFormLayout>
        <DxFormLayoutItem Caption="Employee Phone:" ColSpanMd="6">
            <Template>
                <DxMaskedInput @bind-Value="@EmployeePhone" 
                               Mask="@(@"(\(\d{0,3}\)\d{3}\-\d{4})?")" 
                               MaskMode="@MaskMode.RegEx" />
            </Template>
        </DxFormLayoutItem>
        @*...*@
    </DxFormLayout>
</EditForm>


@code {
    public string EmployeePhone { get; set; }
}

An alternative solution is to use the optional digit metacharacter for all digits: Mask="[phone]".