Form Previous Error Not Getting Cleared

[ramonmalcolm10]

Versions:

• @inertiajs/inertia version: 0.11.0
• @inertiajs/inertia-svelte version: 0.8.0

Describe the problem:

When submit a form with multiple input fields and those fields failed validation, if correct anyone of those field and resubmit, the previous error message will still displayed for the now valid field.

Steps to reproduce:

• Create a multiple input forms using useForm({ first_name: '', last_name: '' })
• Add required server side validations for those fields
• Display error {#if $form.errors.first_name} <p>{$form.errors.first_name}</p> {/if} {#if $form.errors.last_name} <p>{$form.errors.last_name}</p> {/if}
• Submit form without populating the fields <form on:submit|preventDefault={$form.post('/test'))}>
• After getting back the validations failure, input data in one of the fields and resubmit

[ainesophaur]

FWIW for anyone who comes across this.. Ive noticed $form.errors will only retain the initial errors returned by the server and doesnt update. However, $page.props.errors does contain the updated validation results.

[edgars-vasiljevs]

Looks like updating store from within a store doesn't update properties internally.

Here is a quick way to reproduce the issue:

let form = useForm({ test: '' });
$form.setError('test', 'some error');
let context = $form.clearErrors(); // returns "this" object
console.log(JSON.stringify(context.errors));
console.log(JSON.stringify($form.errors));

Output:

{"test":"some error"}
{}

Internally useForm calls .clearErrors and then .setError to set new errors received from failed request (src code).
Since it doesn't clear errors internally, useForm just appends new errors to existing ones (basically merging them).

Edit: issue is that new object is created every time store is updated. See here
Just remove first {} from Object.assign so original store object is updated.

[talovicnedim]

Thanks @ainesophaur

@edgars-vasiljevs what is your approach? Using $page.props.errors or? Thanks!

I wonder whether should I go with Vue or Svelte for a new project.

[ramonmalcolm10]

@talovicnedim I would recommend going with Vue, much better support is available.

[talovicnedim]

That's so fast! @ramonmalcolm10

I'm thinking that too. Svelte looks cool, but seems it's too early for that.

[reinink]

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

[pedroborges]

Already fixed by #1610 ✅