RadzenTemplateForm: Provide access to EditContext for more fine-grained control over validation #399

Closed
opened 2026-01-29 17:36:39 +00:00 by claunia · 2 comments
Owner

Originally created by @bhaeussermann on GitHub (May 8, 2022).

The problem I'm trying to solve is that I would like my form's validation labels to update as you type into the fields, and not only when you tab out of a field.

The (only) way I know to do this using a regular EditForm control is by:

  • instead of binding the model to it directly, to bind an EditContext created from the model to it instead, and then
  • implement the text field's oninput handler to set the model property and call NotifyFieldChanged() on the EditContext

Here's what the code looks like:

<EditForm EditContext=@EditContext OnValidSubmit=@HandleValidSubmit>
    <DataAnnotationsValidator />
    <label for="last-name">Last name:</label>
    <InputText id="last-name" @bind-Value=@Employee.LastName @oninput=@HandleLastNameChanged />
    <div class="validator-container">
        <ValidationMessage For="@(() => Employee.LastName)" />
    </div>
    <button type="submit">Save</button>
</EditForm>

where we initialize EditContext as EditContext = new EditContext(Employee); and the HandleLastNameChanged handler is defined as:

protected void HandleLastNameChanged(ChangeEventArgs args)
{
    Employee.LastName = args.Value.ToString();
    EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => Employee.LastName));
}

This works like a dream. However, I cannot get this working using RadzenTemplateForm. I tried to set its EditContext property, but was unable to do so, since:

  • the property is not defined as a parameter, so I cannot bind to it in the Razor template, and
  • I cannot get a reference to the RadzenTemplateForm in the code-behind using the @ref attribute in order to set the EditContext property there. The referenced property always remains null (I'm not sure if I'm missing something here, but it might be due to the fact that RadzenTemplateForm is generically-typed or generated?)

Suggested solution

I would like for the EditContext property to be defined as a [Parameter] and — like EditForm — allow it to be set to a custom instance in order to allow more fine-grained control.

Originally created by @bhaeussermann on GitHub (May 8, 2022). The problem I'm trying to solve is that I would like my form's validation labels to update as you type into the fields, and not only when you tab out of a field. The (only) way I know to do this using a regular `EditForm` control is by: - instead of binding the model to it directly, to bind an `EditContext` created from the model to it instead, and then - implement the text field's `oninput` handler to set the model property and call `NotifyFieldChanged()` on the `EditContext` Here's what the code looks like: ``` <EditForm EditContext=@EditContext OnValidSubmit=@HandleValidSubmit> <DataAnnotationsValidator /> <label for="last-name">Last name:</label> <InputText id="last-name" @bind-Value=@Employee.LastName @oninput=@HandleLastNameChanged /> <div class="validator-container"> <ValidationMessage For="@(() => Employee.LastName)" /> </div> <button type="submit">Save</button> </EditForm> ``` where we initialize `EditContext` as `EditContext = new EditContext(Employee);` and the `HandleLastNameChanged` handler is defined as: ``` protected void HandleLastNameChanged(ChangeEventArgs args) { Employee.LastName = args.Value.ToString(); EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => Employee.LastName)); } ``` This works like a dream. However, I cannot get this working using `RadzenTemplateForm`. I tried to set its `EditContext` property, but was unable to do so, since: - the property is not defined as a parameter, so I cannot bind to it in the Razor template, and - I cannot get a reference to the `RadzenTemplateForm` in the code-behind using the `@ref` attribute in order to set the `EditContext` property there. The referenced property always remains null (I'm not sure if I'm missing something here, but it might be due to the fact that `RadzenTemplateForm` is generically-typed or generated?) **Suggested solution** I would like for the `EditContext` property to be defined as a `[Parameter]` and — like `EditForm` — allow it to be set to a custom instance in order to allow more fine-grained control.
Author
Owner

@akorchev commented on GitHub (Jun 15, 2022):

I have made the EditContext property to be [Parameter] via c94c00d. Will that help?

@akorchev commented on GitHub (Jun 15, 2022): I have made the EditContext property to be `[Parameter]` via c94c00d. Will that help?
Author
Owner

@bhaeussermann commented on GitHub (Jun 16, 2022):

Yes, that works!

Though interestingly, in the oninput handler method, it seems I have to ensure to notify the change during the next event loop iteration, otherwise the state of the validator is always one key stroke behind. I'm doing this using a Timer like so:

protected void HandleLastNameChanged(ChangeEventArgs args)
{
    Employee.LastName = args.Value.ToString();
    new Timer(args => EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => Employee.LastName)), null, 1, Timeout.Infinite);
}

Not sure if this is due to an issue with the RadzenTemplateForm. Regardless, I can now do what I wanted to do, so I regard this issue as closed 🙂.

@bhaeussermann commented on GitHub (Jun 16, 2022): Yes, that works! Though interestingly, in the `oninput` handler method, it seems I have to ensure to notify the change during the _next_ event loop iteration, otherwise the state of the validator is always one key stroke behind. I'm doing this using a Timer like so: ``` protected void HandleLastNameChanged(ChangeEventArgs args) { Employee.LastName = args.Value.ToString(); new Timer(args => EditContext.NotifyFieldChanged(FieldIdentifier.Create(() => Employee.LastName)), null, 1, Timeout.Infinite); } ``` Not sure if this is due to an issue with the `RadzenTemplateForm`. Regardless, I can now do what I wanted to do, so I regard this issue as closed 🙂.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#399