时间戳

首页 > 解决方案 > 具有 Blazor 表单验证的条件类

blazor - 具有 Blazor 表单验证的条件类

问题描述

我现在正在试用 Blazor，我选择的 CSS 框架是 Tailwind。现在，构建和集成 Tailwind 很容易，但我正在努力寻找有关如何根据输入验证状态有条件地应用类的资源。Blazor 本身添加了一个invalid类，但这显然不适用于 Tailwind 使用的样式方法。基本上我有这个代码：

<div class="mt-1">
    <InputText @bind-Value="LoginRequest.UserName" id="userName" type="text" required
                class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"/>
    <ValidationMessage For="@(() => LoginRequest.UserName)"/>
</div>

border-gray-300...并希望有条件地更改，例如border-red-300如果字段验证失败。

这可能吗？如果是的话，我会喜欢一些指针。

干杯

标签： blazortailwind-css

解决方案

新的 .NET 5 版本似乎可以做到这一点：

<EditForm EditContext="@_loginContext">
 ... body ...
</EditForm>

@code{
    static UserLoginRequest LoginRequest { get; set; } = new();
    readonly EditContext _loginContext = new(LoginRequest);
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        _loginContext.SetFieldCssClassProvider(new TailwindClassProvider());
    }

    private class TailwindClassProvider : FieldCssClassProvider
    {
        public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
        {
            var isValid = !editContext.GetValidationMessages(fieldIdentifier).Any();

            return isValid ? "border-gray-300 placeholder-gray-400 focus:ring-indigo-500 focus:border-indigo-500" : "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500";
        }
    }
}

推荐阅读