Blazor PasswordInput
The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.
Basic usage
# Example View Source
<div class="mb-3">
<PasswordInput @bind-Value="@enteredPassword" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>
@code {
private string? enteredPassword = null;
}Disable
# Use the Disabled parameter to disable the PasswordInput.
Entered password:
Enable
Disable
Toggle
<div class="mb-3">
<PasswordInput @bind-Value="@enteredPassword" Disabled="@disabled" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
private string? enteredPassword = null;
private bool disabled = true;
private void Enable() => disabled = false;
private void Disable() => disabled = true;
private void Toggle() => disabled = !disabled;
}Also, use Enable() and Disable() methods to enable and disable the PasswordInput.
Do not use both the Disabled parameter and Enable() & Disable() methods.
Entered text:
Disable
Enable
<div class="mb-3">
<PasswordInput @ref="passwordInputRef" @bind-Value="@enteredPassword" />
</div>
<div class="mb-3">Entered text: @enteredPassword</div>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
private PasswordInput? passwordInputRef;
private string? enteredPassword = null;
private void Disable() => passwordInputRef.Disable();
private void Enable() => passwordInputRef.Enable();
}Valdations
#
Like any other blazor input component, PasswordInput supports validations.
Add the DataAnnotations on the PasswordInput component to validate the user input before submitting the form.
In the below example, we used Required attribute.
Example View Source
@using System.ComponentModel.DataAnnotations
<style>
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
</style>
<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
<DataAnnotationsValidator />
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">User name: <span class="text-danger">*</span></label>
<div class="col-md-10">
<TextInput @bind-Value="@userLogin.UserName" Placeholder="Enter user name" />
<ValidationMessage For="@(() => userLogin.UserName)" />
</div>
</div>
<div class="form-group row mb-3">
<label class="col-md-2 col-form-label">Password: <span class="text-danger">*</span></label>
<div class="col-md-10">
<PasswordInput @bind-Value="@userLogin.Password" />
<ValidationMessage For="@(() => userLogin.Password)" />
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Login</Button>
</div>
</div>
</EditForm>
@code {
private UserLogin userLogin = new();
private EditContext? editContext;
protected override void OnInitialized()
{
editContext = new EditContext(userLogin);
base.OnInitialized();
}
public void HandleOnValidSubmit()
{
// additional check
if (editContext.Validate())
{
// do something
// submit the form
Console.WriteLine("Login successful");
}
}
private void ResetForm()
{
userLogin = new();
editContext = new EditContext(userLogin);
}
public class UserLogin
{
[Required(ErrorMessage = "User name required.")]
public string? UserName { get; set; }
[Required(ErrorMessage = "Password required.")]
public string? Password { get; set; }
}
}Events: ValueChanged
# This event fires when the PasswordInput value changes, but not on every keystroke.
Example View Source
<div class="mb-3">
<PasswordInput Value="@enteredPassword" ValueExpression="() => enteredPassword" ValueChanged="(value) => PasswordChanged(value)" />
</div>
<div class="mb-3">Entered password: @enteredPassword</div>
@code {
private string? enteredPassword = null;
private void PasswordChanged(string? value)
{
enteredPassword = value;
// do something
}
} 