Form fields


Text field

TODO: text...

Value:
Blazor
<BspTextField @bind-Value="_name" Label="Name" AutoFocus/>
<div>Value: @_name</div>
@code{
    private string? _name;
}

Validation - DataAnnotations

TODO: text...

Blazor
@using System.ComponentModel.DataAnnotations
<EditForm class="@Bs.Css.DisplayFlex.FlexColumn" Model="this">
    <DataAnnotationsValidator/>
    <BdkFocusFirstFieldOnInvalidSubmit/>
    <BspTextField @bind-Value="Name" Label="Name" />
    <BsButton Type="BsButtonType.Submit" Variant="BsButtonVariant.Primary">Send</BsButton>
</EditForm>
@code {
    [Required(ErrorMessage = "Name is required")]
    public string? Name { get; set; }

}

Validation - FluentValidation

TODO: text...

Blazor
@using System.ComponentModel.DataAnnotations
@using FluentValidation
<EditForm class="@Bs.Css.DisplayFlex.FlexColumn" Model="this">
    <BdkFluentValidator Validator="new Validator()"/>
    <BdkFocusFirstFieldOnInvalidSubmit/>
    <BspTextField @bind-Value="Name" Label="Name" />
    <BsButton Type="BsButtonType.Submit" Variant="BsButtonVariant.Primary">Send</BsButton>
</EditForm>
@code {
    public string? Name { get; set; }
    class Validator : AbstractValidator<TextFieldFluentValidationExample>
    {
        public Validator()
        {
            RuleFor(x => x.Name).NotEmpty();
        }
    }
}

Number field

TODO: text...

Value:
Blazor
<BspNumberField @bind-Value="_value" Immediate Label="Value" Step=".1M" Min="-1" Max="100" />
<div>Value: @_value</div>
@code{
    private decimal? _value;
}