Hi guys I wanted to create dynamic input fields validation in Telerik UI. For example when the user clicks submit the validation message bellow each Car Name input field should display “Car Name name is required” if they are null.
`<TelerikForm Model="@carModel" Width="600px"
ValidationMessageType="@FormValidationMessageType.None">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(carModel.CustomerName)" LabelText="Name" />
@foreach (var car in carModel.Cars)
{
<FormItem>
<Template>
<label class="label-text">Car Name</label>
<TelerikTextBox FillMode="outline" @bind-Value="@car.CarName" Placeholder="Enter Car name"></TelerikTextBox>
<TelerikValidationMessage For="(() => car.CarName)"></TelerikValidationMessage>
</Template>
</FormItem>
}
</FormItems>
</TelerikForm>
@code {
private CarModel carModel = new CarModel();
public class CarModel
{
[Required(ErrorMessage = "Please enter your name")]
[MaxLength(40, ErrorMessage = "The name must be up to 40 characters long")]
public string CustomerName { get; set; }
public List<Car> Cars { get; set; } = new List<Car>();
public class Car
{
[Required(ErrorMessage = "Car Name is required")]
public string CarName { get; set; }
}
}
}`
The CustomerName Field works fine but not the Car name Fields when submit is clicked
I attempted to do two way binding but it still won’t show the validation message.
<FormItem>
<Template>
<label class="label-text">Car Name</label>
<TelerikTextBox FillMode="outline"
@bind-Value:get="carModel.CarName"
@bind-Value:set="(value) => { carModel.CarName = value; }"
Placeholder="Enter Car name">
</TelerikTextBox>
<TelerikValidationMessage For="(() => carModel.CarName)"></TelerikValidationMessage>
</Template>
</FormItem>
Can you guys give me advice on how to approach this problem I am quite new to Telerik