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;
}
TextArea field
TODO: text...
Description:
Blazor
<BspTextAreaField @bind-Value="_description" Label="Description" Rows="3" Immediate />
<div style="white-space: pre">Description: @_description</div>
@code{
private string? _description;
}
Date field
TODO: text...
Birthdate:
Blazor
<BspDateField @bind-Value="_birthdate" Label="Birthdate" AutoFocus />
<div>Birthdate: @_birthdate</div>
@code{
private DateTime? _birthdate;
}
Select field
TODO: text...
Option: null
Blazor
<BspSelectField Label="Options" @bind-Value="_option">
<option value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</BspSelectField>
<div>Option: @(_option is null ? "null" : _option.ToString())</div>
@code {
private int? _option = null;
}
Check field
TODO: text...
Blazor
@using System.ComponentModel.DataAnnotations
<EditForm Model="this">
<DataAnnotationsValidator/>
<BdkFocusFirstFieldOnInvalidSubmit/>
<BspCheckField Label="Option" @bind-Value="Option"/>
<div>Option: @Option</div>
<button type="submit">Submit</button>
</EditForm>
@code {
[AllowedValues(true)]
public bool Option { get; set; }
}
Check field with custom label content
TODO: text...
Blazor
<BspCheckField @bind-Value="_like">
I like <a href="https://getbootstrap.com/docs/5.3/forms/checks-radios/#checks" target="_blank">Bootstrap checks</a>
</BspCheckField>
@code {
bool _like;
}