具有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";
}
}
}