Blazor 自定义控件验证

Question

I have created some custom input controls that do not use a input tag to gather user input. For example, a directory locator for Blazor desktop. I understand how Blazor does normal form validation via the edit form. But this approach is dependent on you having some type of input tag for the form to validate. How can we allow our custom component also get validated in our forms?

<div class="directoryBrowserContainer">
    <MyButton Text="Select Folder" OnClick="OpenDirectoryBrowser" />
    <div>
        @Value
    </div>
</div>

@code {
    [Inject]
    public IDirectoryBrowser Browser { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    
    private string _value;
    public string Value
    {
        get => _value;
        set
        {
            if(_value == value) { return; }

            _value = value;
            ValueChanged.InvokeAsync(value);
        }
    }

    private void OpenDirectoryBrowser()
    {
        Value = Browser.Open();
    }

}

In the above example I would want to validate that the Value has some value when the form is submitted.

Thank you, Travis

Answer 1

Here's a starting point. I've removed the Browser stuff and just toggle the string between empty and a value as a demo.

This inherits from InputBase<T> which is a template that doesn't actually have an input .

All you do is:

1. Wire up setting CurrentValueAsString from whatever code you have.
2. Override TryParseValueFromString to parse the string value (supplied to CurrentValueAsString ) to the correct type.

I've also shown how to implement the basic validation directly in the control.

@using System.Diagnostics.CodeAnalysis
@inherits InputBase<string>

<div class="directoryBrowserContainer">
    <button class="btn btn-primary" @onclick=ChangeValue>Change Value</button>
    <div>
        @CurrentValue
    </div>
</div>

@code {
    string newValue = string.Empty;

    protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out string result, [NotNullWhen(false)] out string validationErrorMessage)
    {
        result = value;
        var ret = value != string.Empty;

        validationErrorMessage = ret
        ? string.Empty
        : "Value can't be empty";

        return ret;
    }

    private void ChangeValue()
    {
        if (this.newValue == string.Empty)
            this.newValue = "Hello";
        else
            this.newValue = string.Empty;

        this.CurrentValueAsString = newValue;
    }
}

For more complex setups you can replace CurrentValueAsString with another property which you set from your code, and mimic what it does - here's the source code - https://github.com/dotnet/aspnetcore/blob/e6dd3946f1f14e4182c70ac532dda10dd0f25f4b/src/Components/Web/src/Forms/InputBase.cs#L87