I'm trying to figure out how it would be possible to notify a child component in the Data Form that validation is happening and to apply the validation styling to that control.
Take for example this custom component called TestComp.razor
<SfComboBox TValue="int?" TItem="Model" Placeholder="Model" @bind-Value="@ModelId" DataSource="@_models">
<ComboBoxFieldSettings Value="Id" Text="Name"></ComboBoxFieldSettings>
<ComboBoxEvents TValue="int?" TItem="Model" OnValueSelect="OnValueSelectHandler"></ComboBoxEvents>
</SfComboBox>
@code {
private List<Model> _models = [];
[Parameter] public int? ModelId { get; set; }
[Parameter] public EventCallback<int?> ModelIdChanged { get; set; }
protected override void OnInitialized()
{
_models.Add(new Model { Id = 1, Name = "Model 1" });
_models.Add(new Model { Id = 2, Name = "Model 2" });
_models.Add(new Model { Id = 3, Name = "Model 3" });
}
private async Task OnValueSelectHandler(SelectEventArgs<Model> args)
{
if (args.ItemData is not null) ModelId = args.ItemData.Id;
await ModelIdChanged.InvokeAsync(ModelId);
}
private class Model
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
}
}
I want this to be a separate component on not a field directly on the form because this control along with fetching the data is used in several different places in the application and it seems silly to have to duplicate the same code over again instead of making it its own component.
And there is a page which contains the Form and the child component:
@page "/Test"
@using System.ComponentModel.DataAnnotations
@attribute [StreamRendering]
@rendermode @(new InteractiveServerRenderMode(false))
<SfDataForm Model="@_asset">
<FormValidator>
<DataAnnotationsValidator></DataAnnotationsValidator>
</FormValidator>
<FormItems>
<FormItem Field="@nameof(Asset.SerialNumber)" LabelText="Serial Number"></FormItem>
<FormItem Field="@nameof(Asset.ModelId)">
<Template>
<TestComp @bind-ModelId="@_asset.ModelId"></TestComp>
</Template>
</FormItem>
</FormItems>
</SfDataForm>
@code {
private Asset _asset = new();
private class Asset
{
[Required]
public int? ModelId { get; set; }
[Required]
public string SerialNumber { get; set; } = string.Empty;
}
}
The way it is working right now, the data annotation validation message is appearing below the custom component on submit but the combo box is not being highlighted in red like other controls. Is there a way to trigger this within the child component?
