Blazor自定义控件验证

Question

我已经创建了一些自定义输入控件，这些控件不使用输入标记来收集用户输入。例如，用于Blazor桌面的目录定位器。我理解Blazor是如何通过编辑表单进行正常表单验证的。但是这种方法依赖于您有某种类型的输入标记来验证表单。如何允许我们的自定义组件也在表单中得到验证？

<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();
    }

}

在上面的示例中，我希望验证在提交表单时，该值是否具有某些值。

谢谢你，特拉维斯

Answer 1

这是一个起点。我删除了浏览器内容，只需在空值和值之间切换字符串作为演示。

这是从InputBase<T>继承的，它是一个实际上没有input的模板。

你所做的就是：

1. 连接从任何代码设置CurrentValueAsString。
2. 重写TryParseValueFromString以将字符串值(提供给CurrentValueAsString)解析为正确的类型。

我还演示了如何在控件中直接实现基本验证。

@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;
    }
}

对于更复杂的设置，您可以用您从代码中设置的另一个属性替换CurrentValueAsString，并模仿它所做的事情--下面是源代码-- https://github.com/dotnet/aspnetcore/blob/e6dd3946f1f14e4182c70ac532dda10dd0f25f4b/src/Components/Web/src/Forms/InputBase.cs#L87