IMask


Pattern Mask

Blazor
<BdkIMaskPattern Mask="{#}000[aaa]/NIC-`*[**]">
    <input class="form-control" value="#534/NIC-534" />
</BdkIMaskPattern>

Pattern Mask Unmasked




Real value: 12345678901
Blazor
@using System.ComponentModel.DataAnnotations
<EditForm Model="this">
    <DataAnnotationsValidator/>
    <BdkIMaskPattern Mask="000.000.000-00" Context="mask" Value="@Value" BindTarget="BdkIMaskBindTarget.UnmaskedValue">
        <MaskContext Context="mask">
            <BspTextField Label="Text field component - OnChange" 
                          Value="@mask.MaskedValue"
                          ValueExpression="() => Value"
                          ValueChanged="async _ => { Value = await mask.GetUnmaskedValueAsync(); }" />
        </MaskContext>
    </BdkIMaskPattern>
    <hr />
    <BdkIMaskPattern Mask="000.000.000-00" @bind-Value="@Value" @bind-Value:after="StateHasChanged" BindTarget="BdkIMaskBindTarget.UnmaskedValue">
        <MaskContext Context="mask">
            <BspTextField Label="Text field component - Immediate" Value="@mask.MaskedValue" ValueExpression="() => Value"/>
        </MaskContext>
    </BdkIMaskPattern>
    <hr />
    <BspTextField Label="Text field component - Without imask" @bind-Value="Value" Immediate />
    <hr />
    <BsButton Type="BsButtonType.Submit" Variant="BsButtonVariant.Primary" >Send</BsButton>
</EditForm>
<div>Real value: @Value</div>
@code {
    [Required, RegularExpression(@"\d{11}", ErrorMessage = "Invalid pattern")]
    public string Value { get; set; } = "12345678901";
}

Number Mask

Blazor
<BdkIMaskNumber T="decimal?">
    <input class="form-control" value="1" />
</BdkIMaskNumber>

Number Mask Parameters

Blazor
<BdkIMaskNumber T="decimal?" PadFractionalZeros ThousandsSeparator=@('.') Max="10000" Min="0">
    <input class="form-control" value="10000" />
</BdkIMaskNumber>

Number Mask Binding

Simple input


Value: 12345.67
Blazor
@using System.ComponentModel.DataAnnotations
<h5>Simple input</h5>
<BdkIMaskNumber @bind-Value=DecimalValue
                BindTarget="BdkIMaskBindTarget.TypedValue"
                ThousandsSeparator=@(' ')>
    <input class="form-control" />
</BdkIMaskNumber>
<hr />
<EditForm Model="this">
    <DataAnnotationsValidator/>
    <BdkIMaskNumber @bind-Value=DecimalValue
                    BindTarget="BdkIMaskBindTarget.TypedValue"
                    ThousandsSeparator=@('.')>
        <BspField Label="Decimal field" ValueExpression="() => DecimalValue" Context="field">
            <input class="form-control @field.ValidationClass" />
        </BspField>
    </BdkIMaskNumber>
</EditForm>
<hr />
Value: @(DecimalValue.HasValue? DecimalValue.Value: "null")
@code {
    [Required, Range(100d, 1_000_000d) ]
    public decimal? DecimalValue { get; set; } = 12_345.67m;
}