I've got a RadzenTemplateForm with several Radzen components in it, including some RadzenTextBoxes, RadzenMasks, and a RadzenDatePicker. These Radzen components are wrapped in my own custom components. All of the fields are required, and I'm implementing the RadzenRequiredValidator on each of them within the custom component for each. What I'm finding is that when I type a value in one of the text boxes and then click out of that box, it fires the required validator for all of the other text boxes and the Masks, but not for the date picker, so now I've got a red box around my text fields and "xxx is required" underneath them. I've found that if I just place the Radzen components in the form directly, it behaves properly and does not fire the validation upon leaving a text box. Is there something wrong with my implementation within a component, or is there some way from preventing it from triggering validation upon leaving a text field? I'd like it to only validate once the submit button has been pressed, then after it was pressed and any fields were missing, it can then update the valid status of a field after correcting a value and leaving that text box. If that isn't possible, is it at least possible to trigger the validators for other components at the same time, so that the datepicker validates when the text boxes do, and vice versa? It's a bit confusing to the user that it shows some of the required fields as required, but not the date picker field. It makes it look like it isn't required.
Here is my custom component for the RadzenTextBox. It triggers other text boxes and masks validation upon losing focus after a change even when the submit button wasn't pressed.
(Note: I've removed a lot of my custom code, but I've tested it in this configuration and the issue is still occuring with the code shown)
<RadzenTextBox Name="@Label" @bind-Value="@Value" />
<RadzenRequiredValidator Component="@Label" Text="@($"{Label} is required")" Popup="false" Style="position: absolute" />
@code {
private string _value;
[Parameter]
public string Value
{
get => _value;
set
{
if (_value == value) return;
_value = value;
ValueChanged.InvokeAsync(value);
}
}
[Parameter] public EventCallback<string> ValueChanged { get; set; }
[Parameter] public string Label { get; set; }
}
Here is the implementation of the component.
<RadzenTemplateForm TItem="MyObject" Data="@objectInstance" Submit="@Submit" InvalidSubmit="@InvalidSubmit">
<RadzenFieldSet>
<MyTextBox Label="Item1" @bind-Value="@objectInstance.Item1" />
<br/>
<MyTextBox Label="Item2" @bind-Value="@objectInstance.Item2" />
<br/>
<MyDatePicker Name="Date1" @bind-Value="@objectInstance.Date1" DateFormat="d" />
<br/>
<MyMask Label="Item3" @bind-Value="@objectInstance.Item3" Mask="(***) ***-****" Pattern="[^0-9]" Placeholder="(000) 000-0000" />
<br/>
<RadzenButton Text="Submit" ButtonType="ButtonType.Submit" ButtonStyle="ButtonStyle.Primary" ></RadzenButton>
</RadzenFieldSet>
</RadzenTemplateForm>
Thanks!