Blazor EditForm Validation not working when using Child Component - validation

Question

I have a Blazor component called EditOffice. It looks as follows:
<EditForm Model="#Office" OnValidSubmit="#HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputTextRow Label="Name" #bind-Value="#Office.Name" Placeholder="Enter name" />
<InputTextRow Label="ABN" #bind-Value="#Office.ABN" Placeholder="Enter ABN" />
...
<button type="submit" class="btn btn-primary edit-btn">Save office</button>
</EditForm>
I created child components called InputTextRow in an attempt to Tidy my code. They look as follows:
<div class="form-group row">
<label for="#Id" class="col-sm-3">#Label: </label>
<InputText id="#Id" #oninput="OnValueChanged" #bind-Value="#Value" class="form-control col-sm-8" placeholder="#Placeholder"></InputText>
<ValidationMessage class="offset-sm-3 col-sm-8" For="#(() => Value)" />
</div>
#code {
public string Id => Label.ToLower().Replace(" ", "");
[Parameter]
public string Label { get; set; }
[Parameter]
public string Value { get; set; }
[Parameter]
public string Placeholder { get; set; }
[Parameter] public EventCallback<string> ValueChanged { get; set; }
Task OnValueChanged(ChangeEventArgs e)
{
Value = e.Value.ToString();
return ValueChanged.InvokeAsync(Value);
}
}
The ValidationMessage doesn't work when in my child component. Any idea why?

Answer 1

I know I'm a little late but here is my answer :)
So there is better solution right now.
TL:DR Solution for lazy ones
Be advised - it's experimental, but package is already in release candidate so no worries I guess.
Use Microsoft.AspNetCore.Components.DataAnnotations.Validation package and <ObjectGraphDataAnnotationsValidator /> instead of <DataAnnotationsValidator /> and use this thingy:
using System.ComponentModel.DataAnnotations;
public class YourComplexModel
{
// other properties
[ValidateComplexType] // <--life saver
public ChildModel ChildModel { get; set; } = new ChildModel();
}
Fragment from MS Docs
Link Microsoft Docs:
Blazor provides support for validating form input using data annotations with the built-in DataAnnotationsValidator. However, the DataAnnotationsValidator only validates top-level properties of the model bound to the form that aren't collection- or complex-type properties.
To validate the bound model's entire object graph, including collection- and complex-type properties, use the ObjectGraphDataAnnotationsValidator provided by the experimental Microsoft.AspNetCore.Components.DataAnnotations.Validation package:
<EditForm Model="#model" OnValidSubmit="#HandleValidSubmit">
<ObjectGraphDataAnnotationsValidator />
...
</EditForm>
Annotate model properties with [ValidateComplexType]. In the following model classes, the ShipDescription class contains additional data annotations to validate when the model is bound to the form:
Starship.cs:
using System;
using System.ComponentModel.DataAnnotations;
public class Starship
{
...
[ValidateComplexType]
public ShipDescription ShipDescription { get; set; } =
new ShipDescription();
...
}
ShipDescription.cs:
using System;
using System.ComponentModel.DataAnnotations;
public class ShipDescription
{
[Required]
[StringLength(40, ErrorMessage = "Description too long (40 char).")]
public string ShortDescription { get; set; }
[Required]
[StringLength(240, ErrorMessage = "Description too long (240 char).")]
public string LongDescription { get; set; }
}

Answer 2

I am having exactly the same issue. My code is very similar to yours. My child component do validate, but the validation error message is not displayed.
I do use this extension method:
using System;
using Microsoft.AspNetCore.Components.Forms;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
namespace TimeRecording.Extensions
{
public static class EditContextExtensions
{
static PropertyInfo IsModifiedProperty;
static MethodInfo GetFieldStateMethod;
/// <summary>
/// Validates an entire object tree
/// </summary>
/// <param name="editContext">The EditContext to validate the Model of</param>
/// <returns>True if valid, otherwise false</returns>
public static bool ValidateObjectTree(this EditContext editContext)
{
var validatedObjects = new HashSet<object>();
ValidateObject(editContext, editContext.Model, validatedObjects);
editContext.NotifyValidationStateChanged();
return !editContext.GetValidationMessages().Any();
}
public static void ValidateProperty(this EditContext editContext, FieldIdentifier fieldIdentifier)
{
if (fieldIdentifier.Model == null)
return;
var propertyInfo = fieldIdentifier.Model.GetType().GetProperty(
fieldIdentifier.FieldName,
BindingFlags.Public | BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Static);
var validatedObjects = new HashSet<object>();
ValidateProperty(editContext, fieldIdentifier.Model, propertyInfo, validatedObjects);
}
private static void ValidateObject(
EditContext editContext,
object instance,
HashSet<object> validatedObjects)
{
if (instance == null)
return;
if (validatedObjects.Contains(instance))
return;
if (instance is IEnumerable && !(instance is string))
{
foreach (object value in (IEnumerable)instance)
ValidateObject(editContext, value, validatedObjects);
return;
}
if (instance.GetType().Assembly == typeof(string).Assembly)
return;
validatedObjects.Add(instance);
var properties = instance.GetType().GetProperties(BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Instance);
foreach (PropertyInfo property in properties)
ValidateProperty(editContext, instance, property, validatedObjects);
}
private static void ValidateProperty(
EditContext editContext,
object instance,
PropertyInfo property,
HashSet<object> validatedObjects)
{
NotifyPropertyChanged(editContext, instance, property.Name);
object value = property.GetValue(instance);
ValidateObject(editContext, value, validatedObjects);
}
private static void NotifyPropertyChanged(
EditContext editContext,
object instance,
string propertyName)
{
if (GetFieldStateMethod == null)
{
GetFieldStateMethod = editContext.GetType().GetMethod(
"GetFieldState",
BindingFlags.NonPublic | BindingFlags.Instance);
}
var fieldIdentifier = new FieldIdentifier(instance, propertyName);
object fieldState = GetFieldStateMethod.Invoke(editContext, new object[] { fieldIdentifier, true });
if (IsModifiedProperty == null)
{
IsModifiedProperty = fieldState.GetType().GetProperty(
"IsModified",
BindingFlags.Public | BindingFlags.Instance);
}
object originalIsModified = IsModifiedProperty.GetValue(fieldState);
editContext.NotifyFieldChanged(fieldIdentifier);
IsModifiedProperty.SetValue(fieldState, originalIsModified);
}
}
}