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

问题描述

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

I'm Trying Microsoft Blazor and when working with forms and validation I stopped on how can I change the default CSS class that will be added by default on InputText Validation State.

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

For Explanation when InputText has an error by default take class "invalid" I want to change this class to "is-invalid"

我需要最佳实践

感谢StackOverflow社区

Thanks, StackOverflow community

推荐答案

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

Blazor has arbitrarily picked invalid as the css class for InputBase<T> based items' validation, like InputText. You can however create a new control like MyInputText.razor inherit from these and make your own control and put intermediary code in place.

在这种情况下，您可以将CssClass属性替换为is-invalid和/或valid for有效的CssClass属性进行字符串替换(但要带空格字符！).您可以制作一个辅助方法，也可以直接内联:

In this case you can string replace (but prepend with space character!) the CssClass property replacing invalid for is-invalid, and/or valid for is-valid`. You could make a helper method or simply do it inline:

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

并像正常使用InputText一样使用它:

and use it as you would a normal InputText:

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

这篇关于Blazor更改验证的默认CSS类名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！