Hello,

I'm working on a .NET8 Blazor webapp with some InteractiveAutoRenderMode. I'm trying to figure out how to code the HTML/Razor in a Blazor component to be able to display a pair of inputs and then bind a collection of a complex type.
I also want the possibility for the user to add more instances to the collection within the UI/component by being able to add more inputs (through a button click) before submitting the form.

I am not sure how to capture the properties inside the complex type collection for the FieldIdentifier instance usually helping with binding and validation? And then how would that work within a loop for the user to be able to add more instances to the collection?

FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime)

The HTML for the pair of inputs looks like this:

ManageProductOffer.razor :

<div class="input-group">
    <label for="@($"""idAvailabilityStartInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityStartInput""")" name="fAvailabilityStart"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs,
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityStartTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>

    <label for="@($"""idAvailabilityEndInput""")">
        <input type="datetime-local" id="@($"""idAvailabilityEndInput""")" name="fAvailabilityEnd"
                step="any" min="@(TimeProvider.GetLocalNow().LocalDateTime.ToString(SortableDateTimePatternFormat))"
                class="@(ApplyStyleForValidationState(FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities)))"
                value="@(NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime.ToString(SortableDateTimePatternFormat))"
                @onchange=@(changeEventArgs => TryBindAndValidateField(
                    changeEventArgs: changeEventArgs, 
                    fieldIdentifier: FieldIdentifier.Create(() => NewProductOfferModel!.LimitedAvailabilities[0].LimitedAvailabilityEndTime),
                    validationDelegate: () => LimitedAvailability.ValidateLimitedAvailability(NewProductOfferModel!.LimitedAvailabilities[0]))) />
    </label>
    <small class="">
        <ValidationMessage For="@(() => NewProductOfferModel!.LimitedAvailabilities[0])" />
    </small>
</div>

And the code for the model with the complex type collection looks like this:

ProductOfferModel.cs :

public sealed record class ProductOfferModel
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public String ProductOfferDescription { get; set; } = String.Empty;
    public Guid ProductID { get; set; } = Guid.Empty;
    public String ProductDescription { get; set; } = String.Empty;
    public List<LimitedAvailability> LimitedAvailabilities { get; set; } = [new LimitedAvailability()];
}

public sealed record class LimitedAvailability
{
    public Guid ID { get; init; } = Guid.NewGuid();
    public DateTime LimitedAvailabilityStartTime { get; set; } = DateTime.MinValue;
    public DateTime LimitedAvailabilityEndTime { get; set; } = DateTime.MinValue;

    internal static Boolean ValidateLimitedAvailability( LimitedAvailability limitedAvailability )
    {
        ArgumentNullException.ThrowIfNull(limitedAvailability);

        return limitedAvailability.LimitedAvailabilityStartTime < limitedAvailability.LimitedAvailabilityEndTime ?
            true
            : false;
    }
}

The (microsoft documentation) mentions supporting complex type and be able to nest and bind, however it does not seems to mention how to capture the FieldIdentifier accessor for a property inside complex type to customize @onchange or @oninput  behavior for example.

Anyone has been solving something similar with using collections of complex types and letting the user add more inputs to the form before submit?

I have a button inside of a form that I need to prevent from submitting the form when clicked. How can I add the following to a TelerikButton?

@onclick:preventDefault="true"

@onclick:stopPropagation="true"

I am using a form component as a read only display of my model.

I am using auto generated fields and don't want to define my form items manually if I don't have to. 

Is there an easy way to disable the entire form?

I just updated our .NET 8 Blazor webapp from Telerik 5.0.1 to 5.1.1. Now, interacting with any input in a form applies validation classes to all other inputs in the form.  I hope this behavior is unintentional as it could lead to user confusion. I believe this was introduced in the 5.0.1 update which was supposed to fix the issue of validation classes being present on initial render. I could find no other documentation or discussion regarding this.

This behavior can be seen in the Form - Validation demo...

Blazor Form Demos - Validation | Telerik UI for Blazor

Type valid input in the Graduate Grade field and all other fields turn green even though they don't have valid input...

Clicking Submit to show that those fields are not valid.

Hi,

I have a situation where I want a button to be part of form which triggers a dialog to open on top so the user can choose an image via the filemanager component. Once selected I'll handle the binding to the form item to populate the details required for the form.

However, when I have the button inside the form, and the user clicks it, the OnInvalidSubmit event is immediately triggered because the focus has now shifted to the dialog.

Is there a  way to disable this behavior? I would like the validation to only happen once the save button is pressed in this case.

Thanks!

Hello, I am developing a blazor application using telerik components and i am facing a problem, every 25 minutes during user operations,  the application has refreshed and navigated to home page. Is there a parameter in blazor or telerik is affecting the behaviour. I need to avoid this action.

I am studying the Telerik controls for Blazor, so I've created the following REPL with code found on the docs:

https://blazorrepl.telerik.com/GSuFlZQa06BKC3Xn51

On the REPL everything works perfectly, but when I create a project and use the same code, the fields for the properties Id, FirstName and LastName don't get the values set on code.

Also, the button on the TelerikDatePicker does not work, but I don't know if the two problems are related.

I am attaching a sample project to reproduce the behavior.

Adding FormItem inside the FormItems got System.ArgumentNullException: Value cannot be null. (Parameter 'For') when rendering

This is my code of course the Model and EditContext will be different.

Hi,

I have a TelerikForm containing a Fluent Validator and 2 buttons.
Only one of them has to validate the form.

However, even if I set NO  code into the button's associated method, it does trigger the validation.

Seems to be a default behaviour.

How to disable it for my second button?

Thx in advance

A