[英]Blazor Change Validation default CSS class names
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.我正在尝试 Microsoft Blazor,在使用 forms 和验证时,我停止了如何更改默认值 CSS class,默认情况下将在
InputText
验证 State 上添加。
For Explanation when InputText
has an error by default take class " invalid
" I want to change this class to " is-invalid
" For Explanation when
InputText
has an error by default take class " invalid
" 我想把这个 class 改成 " is-invalid
"
I need best practices.我需要最佳实践。
Thanks, StackOverflow community谢谢,StackOverflow 社区
Any HTML element (or InputText) attribute including the class, can be 'one-way' bound to a variable or expression.包括 class 在内的任何 HTML 元素(或 InputText)属性都可以“单向”绑定到变量或表达式。 So in your case, you could do:
所以在你的情况下,你可以这样做:
<input type="text" class="@((any_validation_condition)? "error_css_class" : "")" />
or just bind to a variable and set that variable at run-time to reflect the suitable display class of the element.或者只是绑定到一个变量并在运行时设置该变量以反映元素的合适显示 class。
Thanks谢谢
Blazor has arbitrarily picked invalid
as the css class for InputBase<T>
based items' validation, like InputText
. Blazor 已任意选择
invalid
作为 css class 用于基于InputBase<T>
的项目验证,如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.但是,您可以创建一个新控件,例如
MyInputText.razor
继承这些控件,并创建自己的控件并放置中间代码。
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
.在这种情况下,您可以字符串替换(但在前面加上空格字符!)
CssClass
属性替换invalid
的is-invalid
和/或valid
的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" />
and use it as you would a normal InputText
:并像使用普通
InputText
一样使用它:
<MyInputText @bind-Value="yourModel.Foo" class="form-control" />
Yes true it's customizable in Core 5.0, but the examples given is not working as is.是的,它在 Core 5.0 中是可定制的,但给出的示例不能按原样工作。 The method
HandleSubmit
must take EditContext
as argument, and the custom FieldCssClassProvider
be set there, not in OnInitialized()
as in the examples.方法
HandleSubmit
必须将EditContext
作为参数,并在那里设置自定义FieldCssClassProvider
,而不是像示例中那样在OnInitialized()
中设置。
private async Task HandleSubmit(EditContext context)
{
context.SetFieldCssClassProvider(new MyFieldClassProvider());
var isValid = context.Validate();
if (isValid)
{
//...
}
else
{
//...
}
My MyFieldClassProvider()
returns " is-valid
" and " is-invalid
" and this works with Bootstrap.我的
MyFieldClassProvider()
返回“ is-valid
”和“ is-invalid
”,这适用于 Bootstrap。
This is now customizable, see here: https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#custom-validation-class-attributes现在可以自定义,请参见此处: 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";
}
}
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 not apply and we should define them globally. 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不适用,我们应该在全球范围内定义它们。 To make them work as isolated css class define them as below for example: 1- Define a.Net class which inherit from
FieldCssClassProvider
and override its GetFieldCssClass
method.为了使它们作为独立的 css class 定义它们,例如: 1- 定义 a.Net class,它继承自
FieldCssClassProvider
并覆盖其GetFieldCssClass
方法。 This method should return some string
as classname from editcontext
and fieldIdentifier
object.此方法应从
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- in OnInitialized
life cycle Set CssClassProvider for edit context using extension method: 2- 在
OnInitialized
生命周期中使用扩展方法为编辑上下文设置 CssClassProvider:
_context = new EditContext(student);
_context.SetFieldCssClassProvider(new MyCustomeCSSProvider());
3- Define your class in isolated css files as below using ::deep
: 3- 使用
::deep
将您的 class 定义在隔离的 css 文件中,如下所示:
::deep .validField {
border-color: lawngreen;
}
::deep .invalidField {
background-color: tomato;
}
::deep .modifiedField {
border: yellow dashed 2px;
}
Bit late the party on this one but to style the validation messages themselves I did this:在这个聚会上有点晚了,但为了自己设置验证消息的样式,我这样做了:
<div class="text-danger mt-2">
<ValidationMessage For="()=>_model.Field" ></ValidationMessage>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.