Detecting A Form Has Changed

[RealityMasque]

Hi,

I've been asked to dynamically show a "save your changes" message when a form has been changed from it's initial state (new or edit), separately from validating the form. I discovered Blazor has an EditForm with an OnFieldChanged event. Is there something built into Blazorise like this?

Thanks,

Orion

[stsrki]

You can hook into the OnFieldChanged on an EditContext. The EditContext API can be find on the <Validations> component.

[RealityMasque]

checking

[RealityMasque]

ok, I tried it, but the event isn't being fired. Or rather, my breakpoint in the event handler isn't being reached.

[RealityMasque]

@using DataGridTest2.Data;

<Validations EditContext="@editContext">
    <Card Shadow="Shadow.Large" Padding="Padding.Is5">
        <CardBody Padding="Padding.Is3">
            <h5><strong>Add Town</strong></h5>
            <br />
            <Accordion>
                <Collapse Visible="@showTown">
                    <CollapseHeader>
                        <Heading Size="HeadingSize.Is5">
                            <AccordionToggle><strong>Town Info</strong></AccordionToggle>
                        </Heading>
                    </CollapseHeader>
                    <CollapseBody>
                        <Card Border="Border.Is0">
                            <CardBody>
                                <Field Horizontal=true>
                                    <FieldLabel ColumnSize="ColumnSize.Is5">
                                        <strong>Town Name</strong>
                                    </FieldLabel>
                                    <FieldBody ColumnSize="ColumnSize.Is7">
                                        <TextEdit @bind-Text="@town.Name" />
                                    </FieldBody>
                                </Field>
                            </CardBody>
                        </Card>
                    </CollapseBody>
                </Collapse>
            </Accordion>
        </CardBody>
    </Card>
</Validations>

@code {
    [Inject]
    INotificationService NotificationService { get; set; }

    private bool showTown = true;
    private Town town = new Town();
    private EditContext editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(town);
        editContext.OnFieldChanged += EditContext_OnFieldChanged;

        base.OnInitialized();
    }

    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        string fieldName = e.FieldIdentifier.FieldName; //breakpoint here not being reached
        NotificationService.Info($"Form Changed. Field {fieldName}", "Info");
    }
}

and part of my data model

namespace DataGridTest2.Data
{
    public class Town : BaseTown
    {
        public Town()
        {
        }

        public string? Name { get; set; }
    }
}

changing the town name in the form doesn't

[David-Moreira]

Another option, without explicitly using our apis, which I personally usually use for simply checking for changes in a Model is to:

• When the Model is initially loaded, Serialize or hash the Model (e.g: serialize using json) and keep that initial hash state in memory.
• When you want to check if the Model has been changed; Re-hash / serialize the Model again, and compare with the initial hash state, if the new hash is different then there have been changes.

This should at least makes sure that the Model is actually different. This is because the user can trigger change events, and still in the end, end up not making actual changes to the Model. So personally, I usually just prefer this approach, since it's also pretty quick to implement.

[stsrki]

The reason why the event is not firing is that you're not working in data-annotations mode. You will have to define a Model too, to make it work.

<Validations Model="@town" EditContext="@editContext">

[David-Moreira]

But in that “global” handler, I could do the serialized model comparison.

@RealityMasque When do you want to tell your user there are unsaved changes? Is it not when he is navigating away, etc? Why do you need to compare everytime? You only need to do it once the user tries to leave the page and present the message if applicable. If there are no changes you let him leave otherwise you could have a popup telling him if he really wants to leave as there are unsaved changes.

Either that or I misunderstood your use case for this message.

Are you just trying to present a notification everytime there's a change, is that it? If thats the case the "global" handler seems appropriate then.

[RealityMasque]

@stsrki - Am I misunderstanding the documentation here : https://blazorise.com/docs/components/validation?

"EditContext
Supplies the edit context explicitly. If using this parameter, do not also supply Model, since the model value will be taken from the Model property."

[RealityMasque]

@David-Moreira : the requirement is to show a message saying that the user needs to save changes just beneath the top nav when the user has changed the form, not when navigating away. I was thinking the serialization could work on any change to compare against an initial state (like you suggested), which could show/hide the "save changes" bar (show when current state != initial state, hide when current state == initial state). I was hoping there jsut wouldn't need to be an OnChange-like event handler for every field, which the EditContext.OnFieldChanged might be able to fulfill.

just double checked w/ the team : the message only needs to show as soon as any field is changed, & it doesn't need to go away if the user returns the form to the initial state. still, that will require having an onchange for every field if there isn't a global way to handle it.

[RealityMasque]

@stsrki - I just tried using & got an error:
"InvalidOperationException: Validations requires a Model parameter, or an EditContext parameter, but not both."

Why are data annotations needed for detecting changes to a field (not validating what is in a field)?

[RealityMasque]

The reason why the event is not firing is that you're not working in data-annotations mode. You will have to define a Model too, to make it work.

<Validations Model="@town" EditContext="@editContext">

Just tried & got the error :
"InvalidOperationException: Validations requires a Model parameter, or an EditContext parameter, but not both."

why are data annotations needed for detecting a change to a field (not validating what is in a field)?

[David-Moreira]

The message is correct you should only provide one or the other. I think it was an oversight on @stsrki part?

The reason why it needs to be in data-annotations mode, is because we have several other validations modes.
This is the one mode that will make it work similar to how the inbuilt Blazor Form works; so we borrow some of the apis and how it works internally. (i.e using the EditContext)

As for the detecting the field changes, I'm not 100% sure it was implemented in a way it detects every field change or just annotated(validation) fields ,@stsrki can you clarify ?

[stsrki]

The text in the docs seems wrong. EditContext works with data annotations only, and a Model is required in this mode. As David already mentioned, we did it that way because we wanted to borrow APIs from the regular Blazor validation.

---

As for the detecting the field changes, I'm not 100% sure it was implemented in a way it detects every field change or just annotated(validation) fields ,@stsrki can you clarify ?

Well, to make it short. We never needed to make it that way. As far as I remember, nobody asked for the event that fires on each change of the backup field. In theory, it could lead to A LOT of rerendering and interfering with the Blazor rendering, state changes, etc., especially on input fields. Now, I didn't test this, but I can think of a potential problem with interfering with the selection and cursor of the input element.

[RealityMasque]

ok, sounds like I have to add a Changed-like event & handler to every field