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

}

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

谢谢你，特拉维斯

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