RadzenAccordion Nested in RadzenTemplateForm not validating properly

Radzen.Blazor Components
1

Hello!

I've made a relatively large form with RadzenTemplateForm. Now I want this form to be a bit more userfriendly by nesting RadzenAccordion in it, so i can work with sections in that form.

The validation works fine on this form when i'm not using the RadzenAccordion in my Form. I tested this out. When I implement the RadzenAccordion, it only validates the tab I have open in the accordion.

I was able to reproduce this problem in a testproject with a smaller sized form for testing purposes of which i shall share the code here.

The page i'm using.

@page "/counter"
@layout MainLayout
@using Radzen
@using Radzen.Blazor
<div>
	@if (IsSaved)
	{
		<h1>Is Saved</h1>
	}
	<RadzenContent Container="main">
		<ChildContent>
			<RadzenTemplateForm class="container-fluid" TItem="TestEntity" Data="testEntity" Submit="Save">
				<RadzenAccordion>
					<Items>
						<RadzenAccordionItem Text="FirstName" Selected=true>
							<div class="row">
								<div class="col-2">
								</div>
								<div class="col-10">
									<RadzenTextBox Name="FirstName" Style="width:85%" TValue="string" @bind-Value="@testEntity.FirstName" />
									<RadzenRequiredValidator Component="FirstName" Text="FirstName is required!" Popup=true></RadzenRequiredValidator>
								</div>
							</div>
						</RadzenAccordionItem>
						<RadzenAccordionItem Text="LastName">
							<div class="row mt-3 mb-3">
								<div class="col-2">
								</div>
								<div class="col-10">
									<RadzenTextBox Name="LastName" Style="width:85%" TValue="string" @bind-Value="@testEntity.LastName" />
									<RadzenRequiredValidator Component="LastName" Text="LastName is required!" Popup=true></RadzenRequiredValidator>
								</div>
							</div>
						</RadzenAccordionItem>
					</Items>
				</RadzenAccordion>
				<RadzenButton ButtonType="ButtonType.Submit" Style="Width: 100%" ButtonStyle="ButtonStyle.Success" Text="Save" />
			</RadzenTemplateForm>
		</ChildContent>
	</RadzenContent>
</div>


@code {
	public TestEntity testEntity = new TestEntity()
		{
			FirstName = "Arne",
			LastName = "",
		};
	public bool IsSaved = false;
	protected void Save()
	{
		IsSaved = true;
	}
}

The Dummyentity i'm using.

namespace ValidationTestProject.Entities
{
    public class TestEntity
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

A little bit of usage info. I've created two required validator components on the input FirstName and input LastName. However when I leave FirstName Empty and LastName Filled in and i click the submit button with only the AccordionItem LastName open. It'll still submit.

Thanks for feedback in advance.

Regards,

Arne Wullaert

2

Components defined inside of Accordion items are not rendered until the item is expanded. This is why invisible components won't participate in validation. Even if they did you wouldn't see the validation messages because the item would have been collapsed.

3

Thanks for the fast respons korchev.

Is there a way to expand them all while I fire the submit event on the form?
Or should I just refrain from using Accordion all together in a Form?