Question

我正在尝试使用Microsoft Blazor，在处理表单和验证时，我停止了如何更改默认CSS类的操作，该类将默认添加到InputText验证状态。

有关默认情况下InputText出现错误时的解释，请使用类“ invalid”，我想将此类更改为“ is-invalid”

我需要最佳实践

感谢StackOverflow社区

Answer 1

任何HTML元素（或InputText）属性（包括类）都可以“单向”绑定到变量或表达式。因此，您可以这样做：

<input type="text" class="@((any_validation_condition)? "error_css_class" : "")" />

或仅绑定到变量并在运行时设置该变量以反映元素的合适显示类。

谢谢

Answer 2

Blazor任意选择invalid作为基于InputBase<T>的项的验证的CSS类，例如InputText。但是，您可以创建一个类似MyInputText.razor的新控件，并从中继承并制作自己的控件并将中介代码放置在适当的位置。

在这种情况下，您可以字符串替换（但以空格字符开头！），将CssClass属性用invalid替换为is-invalid，并且/或者valid for有效。。您可以制作一个辅助方法，也可以直接内联：

@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" class="@CssClass.Replace(" valid", " is-valid").Replace(" invalid", " is-invalid")" @bind="@CurrentValueAsString" />

并像普通的InputText一样使用它：

<MyInputText @bind-Value="yourModel.Foo" class="form-control" />

Answer 3

现在可以自定义，请参见此处：https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#custom-validation-class-attributes

var editContext = new EditContext(model);
editContext.SetFieldCssClassProvider(new MyFieldClassProvider());

...

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

        return isValid ? "good field" : "bad field";
    }
}

Answer 4

是的，它可以在 Core 5.0 中自定义，但给出的示例无法按原样运行。方法 HandleSubmit 必须将 EditContext 作为参数，并在那里设置自定义 FieldCssClassProvider，而不是像示例中那样在 OnInitialized() 中设置。

    private async Task HandleSubmit(EditContext context)
    {
        context.SetFieldCssClassProvider(new MyFieldClassProvider());
        var isValid = context.Validate();

        if (isValid)
        {
            //...
        }
        else
        {
            //...
        }

我的 MyFieldClassProvider() 返回“is-valid”和“is-invalid”，这适用于 Bootstrap。

Blazor更改验证的默认CSS类名称

4 个答案: