具有 Blazor 表单验证的条件类 [重复]

Question

我现在正在试用 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。

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

干杯

Answer 1

新的 .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";
        }
    }
}