How to use RadzenRequiredValidator to validate a RadzenDropDown?

Radzen Studio Blazor Server
1

I have one parent component and one child component. The child component contain RadzenDropDown is not validating when click on submit button from parent component.

Child component:-

<RadzenDropDown class="form-control" placeholder="Select Category"
                        AllowClear="true"
                        AllowFiltering="true"
                        Multiple="true"
                        FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                        TextProperty="Name"
                        ValueProperty="Id"
                    @bind-Value=@idCategory
                    Data = @_listCategory
                    Name="CategoryName"
                        Change=@(args => onProductsChange(args)) />
                    <RadzenRequiredValidator style="color:red; font-weight:bold;position: absolute;" Component="CategoryName" Text="Category is Required" />

@code{
[Required]
    public IEnumerable<string> idCategory{ get; set; } = new List<string>();

    List<string> _listCategory;
}

Parent component:-

@code{
               private async void OnValidSubmit()
    {
        if (childComponentObj.idCategory?.Any() == true)
        {
            //save the checked items.
        }
        else
        {
            //show validation message.
        }
    }
}

How to solve this?

2

You need to ensure that the component is embedded in RadzenTemplateForm component for validators to work. Like this as shown in demo. Also ensure that the bound variable does not have default value.

3

Yes sir, the child component is embedded in RadzenTemplateForm component means the RadzenTemplateForm is embedded within the parent component. And the bound variable is idCategory and it is IEnumerable<string>. But still is not working. How can I do this?

4

Can you pls share the razor file here ?

5

This is parent page

  <RadzenTemplateForm TItem="CollectionModel" Submit="OnValidSubmit" Data=@model>
 <DataAnnotationsValidator />
  <ProductSelection @ref="orgSelection"></ProductSelection>
  </RadzenTemplateForm>

And ProductSelection is the child component. Page code updated pls check once

6

You will need to add radzentemplateform in your productselection childcomponent also.

1 Like
7

I have tried but still it is not working

8

I don't think Blazor validation will work with a custom component without it implementing certain properties such as ValueExpression and FieldIdentifier. Check FormComponent and some Radzen.Blazor component which implements it such as RadzenTextBox.

1 Like
9

Could you please explain how could I implement the ValueExpression and FieldIdentifier in

<RadzenDropDown
RadzenDropDown Multiple="true"   @bind-Value=@idCategory Name=""idCategory" Change=@(args => onProductsChange(args)) />
    <RadzenRequiredValidator style="position: absolute;" Component="idCategory" Text=" is Required" />
@code{
[Required]
 public IEnumerable<string> idCategory{ get; set; } = new string[] { };
 private IList<ProductDetails> _listCategory;
}

I referred your links above and but I can not find RadzenDropDown Multiple="true" from there and then I referred this one but I is not working for me.

10

I am afraid implementing custom components is beyond the scope of our community forum. Can't help you with that.