Input Component Core Features

The Blazor Library's input components come equipped with essential core features that empower developers to create dynamic and responsive user interfaces.

About Input Components

HTML input tags do not consistently prevent invalid input from users. For instance, in specific browsers like Firefox, an input with type="number" may still accept character input. In these cases, the Blazor Library takes a particular approach: it does not bind the invalid value in the UI to the associated C# property and the C# property retains the latest valid value. Developers are presented with two options in response to such unparsable values: they can choose to treat them as errors or provide a custom value parser handler for more specialized handling.

Binding on Different HTML Events

All input components within the Blazor Library provide the UpdateOnHtmlEvent parameter, allowing precise control over when the binding process takes place. This parameter defines the HTML event that triggers the binding process, and it can be set to various events such as oninput, onchange, onkeydown, and more. The default value is onchange.

Let's illustrate the difference between two components using this parameter

Input value:
<!-- Default behavior (onchange event) -->
<BlazorInputText @bind-Value="MyString" />
Input value:
<!-- Customized behavior (oninput event) -->
<BlazorInputText @bind-Value="MyString" UpdateOnHtmlEvent="oninput" />

Treating Parse Value Failures as Errors

HTML input tags don't always prevent invalid input from users. For instance, an input with type="number"" may still accept character input in certain browsers like Firefox. In such cases, Blazor Library provides developers with a mechanism to interpret this kind of input and treat it as an error using the ValueParse parameter.

The ValueParse parameter includes:

  1. UserInputValue: Indicates the current value displayed in the input. For instance, if a user enters a character value into a numeric input, this value will represent the invalid input displayed in the UI.

  2. FieldState: Represents the field state of the current input component.

  3. ParseSuccess: Indicates whether the user input value was successfully parsed.

To treat parse value failures as errors, developers can utilize the ValueParsed event as shown in the example below:

Input value: 0
<BlazorInputNumber @bind-Value="MyNumber" ValueParsed="NumberParsed" />
<div>Input value: @MyNumber</div>

@code {
    public int MyNumber { get; set; }
    public void NumberParsed(ParseEventArgs args)
    {
        string messageId = "NumberUnparsable";
        args.FieldState.Messages.Remove(messageId);

        if (!args.ParseSuccess)
        {
            args.FieldState.Messages.Add(new ValidationMessage(messageId, ValidationMessageType.Error, "The input contains an invalid value."));
        }
    }
}

In this example, when a parse failure occurs, developers can add an error message to the FieldState, providing users with clear feedback on the invalid input, enhancing the overall user experience.

Handling the Parsing Process

Input components in the Blazor Library offer remarkable versatility, allowing developers to use them for various purposes. For instance, an input with type="text" can accept diverse formats such as color hex codes or GUIDs. However, developers may want to control and restrict the binding process when the user enters input that doesn't conform to specific criteria. This is achievable using the ParseValueHandler parameter.

Let's take a look at an example where we restrict input to values that start with "ID-":

Id value:
<BlazorInputText @bind-Value="MyIdString" ParseValueHandler="IdParser" />

@code {
    public string MyIdString { get; set; } = "";
    public string? IdParser(string? input)
    {
        if (!input.StartsWith("ID-"))
        {
            throw new Exception("We only accept text that starts with 'ID-'.");
        }

        return input;
    }
}

The IdParser method receives the user's input as its parameter. In this method, we've implemented a validation rule that checks if the input string begins with "ID-." If the input doesn't meet this criterion, an exception is thrown with a descriptive error message, clearly indicating that only input starting with "ID-" is accepted. Consequently, the ValueParsed event will be fired with ParseSuccess set to false.

By leveraging the ParseValueHandler parameter and the ValueParsed event, developers can enforce specific rules during the parsing process, ensuring that user input adheres to the desired format or criteria. This capability empowers you to create robust and user-friendly input components that cater to your application's unique requirements.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙