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>