Blazor Razor Validation Message don't display from component library

Question

I have created a library of blazor components to be able to call the components from the app but the message validation doesn't show. At the moment, the validation is done in a InputText (it validates the format or the length of the Input) but the message or the style of the component is not shown.

The code of the component library:

CustomInputText

<input value="@Value" @oninput="OnValueChanged" placeholder=@placeholderText class="form-control i-component o-my-4" />
<ValidationMessage For="@(() => model)" />

@code {
    [Parameter]
    public string placeholderText { get; set; }

    [Parameter]
    public object model { get; set; }

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();

        return ValueChanged.InvokeAsync(Value);
    }
}

I import the component from a nuget package to be able to use it in the App

The App code:

<CustomInputText placeholderText="Place Holder Test" model="filterPayroll.IPF" @bind-Value="filterPayroll.IPF"/>

When I put the ValidationMessage directly in the app it works correctly, but not in the library. For the two cases, the validation linked to the "filterPayroll" class is done correctly, the difference is that in one the message is displayed and the other does not.

MrC aka Shaun Curtis · Accepted Answer · 2021-05-18 12:16:28Z

4

You need to pass the For for the Validation Summary as an expression.

CustomInputText needs to look like this:

<input value="@Value" @oninput="OnValueChanged" placeholder=@placeholderText class="form-control i-component o-my-4" />
<ValidationMessage For="@For" />

@code {
    [Parameter]
    public string placeholderText { get; set; }

    [Parameter] public Expression<Func<string>>? For { get; set; }

    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }

    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();

        return ValueChanged.InvokeAsync(Value);
    }
}

And your markup:

<CustomInputText @bind-Value="filterPayRoll.IDF" For="() => filterPayRoll.IDF" />

answered May 18, 2021 at 12:16

MrC aka Shaun Curtis

32.4k3 gold badges27 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tetsuo Over a year ago

Do you know how can I add the class of the message error (.validation-message) to the text of the input text, so both are shown in red color?

MrC aka Shaun Curtis Over a year ago

Not directly, I always use the Blazor Input controls, or my inherited versions of them that handle the CSS changes . You can get a CSS string by calling FieldCssClass() on the EditContext with valid or invalid in the string if the field - as identified by a FieldIdentifier - fails validation. You create a FieldIdentifier like this FieldIdentifier fi = new FieldIdentifier(model: model, fieldName: "fieldName");

Collectives™ on Stack Overflow

Blazor Razor Validation Message don't display from component library

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related