Validation Not Working in TemplateForm

Radzen.Blazor Components
1

Validation is working in my template form except for the RadzenTextbox controls. I have tried using @bind-value and the Value properties as well as DataAnnonations Required attribute on my model and nothing is working. Validation does work for the MaskedText controls however.

<RadzenTemplateForm TItem="RequestDTO" Data=@requestModel Submit=@OnSubmit InvalidSubmit=@OnInvalidSubmit>
	<RadzenRow JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="1em" class="rz-p-1">
		<RadzenColumn Size="5" class="rz-text-align-right">
			<RadzenText Text="First Name:" />
		</RadzenColumn>
		<RadzenColumn Size="7" class="rz-text-align-left">
				<RadzenTextBox Name="FirstName" Value="@requestModel.FirstName" MaxLength="50"></RadzenTextBox>
				<RadzenRequiredValidator Component="FirstName" Text="First Name is required" Popup=false />
		</RadzenColumn>
	</RadzenRow>
	<RadzenRow JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="1em" class="rz-p-1">
		<RadzenColumn Size="5" class="rz-text-align-right">
			<RadzenText Text="Last Name:" />
		</RadzenColumn>
		<RadzenColumn Size="7" class="rz-text-align-left">
			<RadzenTextBox Name="LastName" @bind-value=@requestModel.LastName MaxLength="50"></RadzenTextBox>
			<RadzenRequiredValidator Component="LastName" Text="Last Name is required" Popup=false />
		</RadzenColumn>
	</RadzenRow>
	<RadzenRow JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="1em" class="rz-p-1">
		<RadzenColumn Size="5" class="rz-text-align-right">
			<RadzenText Text="Email:" />
		</RadzenColumn>
		<RadzenColumn Size="7" class="rz-text-align-left">
			<RadzenTextBox Name="Email" @bind-value=@requestModel.Email MaxLength="50" Style="width:300px;"></RadzenTextBox>
			<RadzenRequiredValidator Component="Email" Text="Email is required" Popup=false />
			<RadzenEmailValidator Component="Email" Text="Provide a valid email address" Popup=false />
		</RadzenColumn>
	</RadzenRow>
	<RadzenRow JustifyContent="JustifyContent.Center" AlignItems="AlignItems.Center" Gap="1em" class="rz-p-1">
		<RadzenColumn Size="5" class="rz-text-align-right">
			<RadzenText Text="Phone:" />
		</RadzenColumn>
		<RadzenColumn Size="7" class="rz-text-align-left">
			<RadzenMask Mask="***-***-****" CharacterPattern="[0-9]" Name="PhoneNumber"
						Placeholder="XXX-XXX-XXXX" @bind-Value=@requestModel.PhoneNumber MaxLength="12" />
			<RadzenRequiredValidator Component="PhoneNumber" Text="Phone is required" Popup=false />
		</RadzenColumn>
	</RadzenRow>
	<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center" Gap="1rem" Class="rz-mt-8 rz-mb-4">
		<RadzenButton ButtonType="ButtonType.Submit" ButtonStyle="ButtonStyle.Success" Size="ButtonSize.Medium" Icon="save" Text="Submit Request" />
	</RadzenStack>
</RadzenTemplateForm>
2

Hi @gknierim-me,

You must use @bind-Value and not @bind-value. The casing is important.

3

Doh! Thanks. I know I had them as uppercase but looks like it got changed somehow.