Blazor - Nested component does not highlight invalid fields or display ValidationMessages

I can't figure out how to highlight invalid fields and display individual ValidationMessages for nested components. The same code when added to the page works as expected, but when moved to a separate component the page's ValidationSummary displays errors for this component just fine, but component itself does not provide any validation results.

I did an extensive search and I only found topics about validation of complex models, but nothing about displaying validation information in nested components. This suggests that I am probably missing something simple, but I can't figure out what this is.

Here is the simplified code reproducing this behavior.

Product.cs

public class Product{    public int Id { get; set; }    [Required(ErrorMessage = "Added On Date is required")]    public DateTime? AddedOn { get; set; }    [Required(ErrorMessage = "Product Name is required")]    public string Name { get; set; }    public int BrandId { get; set; }    public int ManufacturerId { get; set; }}

ChildComponent.razor

<div class="card"><div class="card-header">        @(new MarkupString(Caption))</div><div class="card-body"><input type="text" @bind-value=@TextValue /><ValidationMessage For=@(() => TextValue) /><input type="datetime-local" @bind-value=@DateValue /><ValidationMessage For=@(() => DateValue) /></div></div>@code {    [Parameter]    public string Caption { get; set; }    [Parameter]    public string TextValue { get; set; }    [Parameter]    public DateTime? DateValue { get; set; }}

TestPage.razor

@page "/test"<EditForm OnValidSubmit="HandleFormSubmit" Model="@ProductModel"><DataAnnotationsValidator />    @*ValidationMessages are returned/displayed*@<div class="card"><div class="card-header">            Control on the Page</div><div class="card-body"><input type="text" @bind-value=@ProductModel.Name /><ValidationMessage For=@(() => ProductModel.Name) /><input type="datetime-local" @bind-value=@ProductModel.AddedOn /><ValidationMessage For=@(() => ProductModel.AddedOn) /></div></div>    @*ValidationMessages are NOT returned/displayed*@<ChildComponent Caption="Nested Component"                    DateValue=@ProductModel.AddedOn                    TextValue=@ProductModel.Name />    @*ValidationSummary displays errors as expected*@<ValidationSummary /><input type="submit" value="Save" class="btn btn-primary" /></EditForm>@code {    Product ProductModel = new Product();    private async Task HandleFormSubmit(EditContext context) { }}

EDIT:

Using info from the link provided by @NeilW I am now able to change the CSS of input controls (red border when invalid, green when valid), but I am still not able to display ValidationMessages for invalid controls. Any suggestions?