Blazor 更改验证默认值 CSS class 名称

Question

我正在尝试 Microsoft Blazor，在使用 forms 和验证时，我停止了如何更改默认值 CSS class，默认情况下将在InputText验证 State 上添加。

For Explanation when InputText has an error by default take class " invalid " 我想把这个 class 改成 " is-invalid "

我需要最佳实践。

谢谢，StackOverflow 社区

Answer 1

包括 class 在内的任何 HTML 元素（或 InputText）属性都可以“单向”绑定到变量或表达式。 所以在你的情况下，你可以这样做：

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

或者只是绑定到一个变量并在运行时设置该变量以反映元素的合适显示 class。

谢谢

Answer 2

Blazor 已任意选择invalid作为 css class 用于基于InputBase<T>的项目验证，如InputText 。 但是，您可以创建一个新控件，例如MyInputText.razor继承这些控件，并创建自己的控件并放置中间代码。

在这种情况下，您可以字符串替换（但在前面加上空格字符！） CssClass属性替换invalid的is-invalid和/或valid的is-valid 。 您可以制作一个辅助方法或简单地内联：

@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

是的，它在 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。

Answer 4

现在可以自定义，请参见此处： 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 5

As an addition to @user774031 answer: Blazor Framework Adds an Id to Isolated css class to make them scoped to Razor component but since this Id attribute added on Runtime, they do not add to child InputComponent and so the css class defined using css isolation do不适用，我们应该在全球范围内定义它们。 为了使它们作为独立的 css class 定义它们，例如： 1- 定义 a.Net class，它继承自FieldCssClassProvider并覆盖其GetFieldCssClass方法。 此方法应从editcontext和fieldIdentifier object 返回一些string作为类名。

public class MyCustomeCSSProvider : FieldCssClassProvider
    {
        public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
        {
            string className = string.Empty;
            if (editContext.IsModified(fieldIdentifier))
            {
                className += " modifiedField";
            }
            if (editContext.GetValidationMessages(fieldIdentifier).Any())
            {
                className += " invalidField";
            }
            else
            {
                className += " validField";
            }
            return className;
        }

    }

2- 在OnInitialized生命周期中使用扩展方法为编辑上下文设置 CssClassProvider：

_context = new EditContext(student);
_context.SetFieldCssClassProvider(new MyCustomeCSSProvider());

3- 使用::deep将您的 class 定义在隔离的 css 文件中，如下所示：

::deep .validField {
    border-color: lawngreen;
}

::deep .invalidField {
    background-color: tomato;
}
::deep .modifiedField {
    border: yellow dashed 2px;
}

Answer 6

在这个聚会上有点晚了，但为了自己设置验证消息的样式，我这样做了：

<div class="text-danger mt-2">
    <ValidationMessage For="()=>_model.Field" ></ValidationMessage>
</div>