[SOLVED] How to properly use RadzenRequiredValidator to Radzen Components

How to properly use RadzenRequiredValidator to Radzen Components

I just started using Radzen components for my Blazor Server Side app. I found out that there are very few information regarding the title above and how to properly fix or implement validations.

So i listed below what should be the correct implementation on the most common components.

Solution

So what is the correct way of using Radzen Validators?

You should first read the documentations regarding the components you are using.
Check first the examples and usages.

Now, let us say you already completed the two items mentioned above and still the validations are not working properly.

Any components that can be validated should use the property @bind-Value instead of Value

Yes, you read it right. Using @bind-Value will fix all of my problems for components below:

RadzenTextBox
RadzenDatePicker
RadzenNumeric

You can also try this to other components that can be validated

Below are the examples:

For RadzenDatePicker: (below is using Inline Calendar, if you are not using the inline Calendar then you should validate the control the same as RadzenTextBox validation)

<RadzenDatePicker Name="DTPicker" Max="DateTime.Today" Inline="true" TValue="DateTime?" @bind-Value=@ValueDate Change=@OnChangeEventMethod>
    <FooterTemplate>
        <RadzenButton title="Clear Selected Date" Variant="Variant.Flat" ButtonStyle="ButtonStyle.Light" Click=@(args => OnClickDatePicker(args)) Text="Clear" class="my-3 w-100" />
    </FooterTemplate>
</RadzenDatePicker>
<RadzenRequiredValidator Component="DTPicker" DefaultValue="null" Text="This field is required" />

If your DateTime property is nullable then you should declare DefaultValue="null".

This will properly validate your component

If your property is not nullable then you can specify the default value yourself. Example: DefaultValue="DateTime.Min".

You can also check first if the validation will still work if you did not define a DefaultValue

Note: RadzenDatePicker's Name="DTPicker" should also be the same for RadzenRequiredValidator's Component="DTPicker". This is also the same to other components like RadzenTextBox and RadzenNumeric

For RadzenTextBox:

<RadzenTextBox Name="MyTextBox" Change=@(args => OnChange(args)) @bind-Value=@TextBoxValueProp />
<RadzenRequiredValidator Component="MyTextBox" Text="This field is required"/>

As you can see, the default value for any textbox is string so by default we do not need to define:

RadzenTextBox's TValue and
RadzenRequiredValidator's DefaultValue

For RadzenNumeric:

<RadzenNumeric Name="MyNumBox" TValue="int?" Change=@(args => OnChange(args)) @bind-Value=@ValueIntProp />
<RadzenRequiredValidator Component="MyNumBox" DefaultValue="null" Text="This field is required"/>

On this example, we want our component to accept values greater than or equal to 0. To validate, @ValueIntProp should be in nullable type and TValue should also be in nullable type :

ValueIntProp should be declared as private int? ValueIntProp { get; set; } and
RadzenNumeric should be TValue="int?" and
RadzenRequiredValidator should be DefaultValue="null"

With this validation, it will check if the current value is null, if the User try to submit the form then it will show the validation error

Finally:

For the validations above to work, those components should be inside the RadzenTemplateForm element

Example:

<RadzenTemplateForm Data="@order" Submit="@((OrderClass args) => { Submit(args); })">
    <RadzenNumeric Name="MyNumBox" TValue="int?" Change=@(args => OnChange(args)) @bind-Value=@order.Count />
    <RadzenRequiredValidator Component="MyNumBox" DefaultValue="null" Text="This field is required"/>
</RadzenTemplateForm>
@code {
    public class OrderClass
    {
        public int? Count { get; set; }
    }

    void Submit(OrderClass arg)
    {
        //TODO - add your code below
    }

    OrderClass order = new OrderClass();
}

For more info, read the documentations below:

Let me know on the comments if you have any questions or other suggestions