MudField error is ignored by MudForm validation

Bug type

Component

Component name

MudField

What happened?

We’re using MudField to wrap our custom input controls in order to get a coherent look and feel, as suggested under Advanced Usage in the docs. MudField conveniently provides the Error and ErrorText parameters but since the component is not based on MudFormComponent and does not register with the cascading MudForm those errors are ignored during form validation.

Out of desperation I even considered implementing IFormComponent myself and registering my component with the cascading MudForm just like MudFormComponent does, but even that failed because IForm.Add() is declared internal and thus inaccessible from user code.

Expected behavior

Surely there ought to be a way to create my own input controls and have them participate in the same validation mechanism as the other, built-in controls? What was the reason to not base MudField on MudFormComponent, since that appears to be the primary usage anyway?

Perhaps this could be considered a feature request but the lack of validation is so non-intuitive that I think it should be treated as a bug. I’m willing to make a PR if the MudBlazor team thinks it’s a good idea.

Reproduction link

https://try.mudblazor.com/snippet/QOQxEzlrhZIQxdLN

Reproduction steps

Press the “Validate” button

Relevant log output

No response

Version (bug)

6.2.5

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge

On what operating system are you experiencing the issue?

Windows, Linux

Pull Request

I would like to do a Pull Request

Code of Conduct

I agree to follow this project’s Code of Conduct

Issue Analytics

State:
Created 4 months ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

kaleidocorecommented, Aug 21, 2023

Same here. There is plenty of scenarios where CustomComponent is needed on form. Correct me if I’m wrong but maybe more consistent is approach as following:
<MudField For="() => model.property" @bind-Value="model.property" Validation="ValidateValue">
  <CustomComponent @bind-Value="model.property" />
</MufField>
So… the idea is to copy most of typical input field behaviors but then just replace rendering part. Then any, including 3rd party, component can be used (I think) without inheritance.

You wouldn’t really have to bind the value to the MudField, at least not 2-way bind it since MudField would never update it. 1-way binding could possibly be used to detect changes and trigger re-validation.

FWIW I eventually worked around the problem by creating my own ValidationFieldComponent.razor, which wraps a hidden MudTextField and implements basic error/validation params.

<div id="needed_for_validation" style="display:none">
	<MudTextField T="string" Validation="@ValidationFunc" @ref="_validationRef" Text="@Errors.FirstOrDefault()" />
</div>

@if(ShowErrorText && HasError)
{
	<MudText Color="MudBlazor.Color.Error" Typo="Typo.caption" Align="Align.Center">@Errors.FirstOrDefault()</MudText>
}

This way it’s fairly reusable and can optionally display the error message too, if my custom component can’t. But it’s still a sort of hack in my book.

0reactions

KrzychuRcommented, Aug 21, 2023

Same here. There is plenty of scenarios where CustomComponent is needed on form. Correct me if I’m wrong but maybe more consistent is approach as following:

<MudField For="() => model.property" @bind-Value="model.property" Validation="ValidateValue">
  <CustomComponent @bind-Value="model.property" />
</MufField>

So… the idea is to copy most of typical input field behaviors but then just replace rendering part. Then any, including 3rd party, component can be used (I think) without inheritance.

I’m just started with MudBlazor so… maybe I’ve missed something important.

Top Results From Across the Web

Form validation not triggering when text is empty #3382

When writing a letter into a MudTextField inside a MudForm and then erasing it, the validation is not updated. Expected behavior. Validation ......

How To Use Forms In MudBlazor (MudForm & EditForm)

The tutorial will cover the components, validation, and the ... The Form and MudForm 06:45 MudTextField and Validation 10:32 Handling Submit ...

Trigger field validation when other field is changed using ...

@700z I see, you can use FieldChanged event callback in the MudForm component to trigger the form. Validate() when any of the switches...

Text Field

Note that any Placeholder will be ignored where the browser provides a default placeholder.

Form Validation

This example shows how to make use of the powerful FluentValidation validators with MudForm. Basically, we call the validator in our validation function...