Example:
I have the following class:
public class WeatherForecast
{
public DateTime Date { get; set; }
public int TemperatureC { get; set; }
public int TemperatureF => 32 (int)(TemperatureC / 0.5556);
[Required]
public string? Summary { get; set; }
}
where I set the property Summary to Required
I have a razor component where I set that property
<InputText DisplayName="Test" @bind-Value="Text"></InputText>
@code {
[Parameter]
public string? Text { get; set; }
[Parameter]
public EventCallback<string> TextChanged { get; set; }
}
in this razor page I use the Edit Form to set it:
@using TestRequired.Data;
<EditForm Model="wheater">
<ValidationSummary></ValidationSummary>
<DataAnnotationsValidator />
Component
<TestEditorComponent @bind-Text="wheater.Summary" />
Input Text
<InputText DisplayName="Test" @bind-Value="wheater.Summary"></InputText>
<button type="submit" >Submit</button>
</EditForm>
@code {
WeatherForecast wheater = new WeatherForecast();
private int currentCount = 0;
private void IncrementCount()
{
currentCount ;
}
}
when I try to submit an empty string, I receive the following result:
The first one, is my component and it is not highlighted. Instead the input text, is correctly red.
How can I automatic highlight my components in a form if the binded property in the Model is required?
Thank you!
CodePudding user response:
If you want to create a composite control of some type, you need to manually map the bind "triumvirate" like this into the child component:
@using System.Linq.Expressions;
<InputText DisplayName="Test" Value="Text" ValueChanged="TextChanged" ValueExpression="this.TextExpression" />
@code {
[Parameter] public string? Text { get; set; }
[Parameter] public EventCallback<string> TextChanged { get; set; }
[Parameter] public Expression<Func<string>>? TextExpression { get; set; }
}
"Bind" is a Razor directive not C#.