In my client project I have Pages/ParentPage.razor
and Components/ChildComponent.razor
When submitting, the <ValidationSummary />
shows both messages The DirectTextBox field is required.
and The ChildTextBox field is required.
However, only the DirectTextBox
field shows validation in the field itself:
How can I get the validation styling to show for controls that are used in child components?
ParentPage.razor
has:
Razor@page "/Parent"
@using System.ComponentModel.DataAnnotations
<h3>ParentPage</h3>
<EditForm Model="this" OnValidSubmit="OnValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<label for="directTextBox">Direct <code>DxTextBox</code> on page</label>
<DxTextBox InputId="directTextBox" @bind-Text=DirectTextBox/>
<label for="childComponent"><code>DxTextBox</code> from child component</label>
<ChildComponent InputId="childComponent" @bind-Value=ChildTextBox />
<DxButton Text="Submit" SubmitFormOnClick="true" />
</EditForm>
@code {
[Required] public string? DirectTextBox { get; set; }
[Required] public string? ChildTextBox { get; set; }
Task OnValidSubmit()
{
//do some work...
return Task.CompletedTask;
}
}
ChildComponent.razor
has:
Razor<DxTextBox @bind-Text:get=Value @bind-Text:set=ValueChanged InputId=@InputId />
@code {
[EditorRequired][Parameter] public string InputId { get; set; } = "";
[Parameter] public string? Value { get; set; }
[Parameter] public EventCallback<string?> ValueChanged { get; set; }
}