Inertia: 'this.form.clearErrors()' returns error

[TimVanHerwijnen]

Versions:

• @inertiajs/inertia version: 0.8.4
• @inertiajs/inertia-vue version: 0.5.5
• @inertiajs/inertia-vue3 version: 0.2.3
• @inertiajs/inertia-react version: -
• @inertiajs/inertia-svelte version: -

Describe the problem:

Context:

The form is initialized like so:

data () {
    return {
        form: this.$inertia.form({
            '_method': 'PUT',
            name: '',
        }, {
            bag: 'updateDivisionForm'
        }),
    }
},

The problem:

Whenever I call this.form.clearErrors() the errors are not cleared and the console returns an error:

I have already ran yarn upgarde --latest.

Steps to reproduce:

1. Create the form using form: this.$inertia.form({...}) with errorbag (like in example above)
2. Submit the form using this.form.post()
3. (optional) Have the server return a validation error
4. Call this.form.clearErrors()

---

Did I miss something? I used these docs as guide

---

[ajnsn]

@TimVanHerwijnen Can you please share the code where you call this.form.clearErrors()? Sounds like a context issue. Are you using Vue 2 or 3?

This is not directly connected to your issue but errorBags are not needed with the form helper:

Note, if you're using the form helper, it's not necessary to use error bags, since validation errors are automatically scoped to the form object.

[TimVanHerwijnen]

@ajnsn I am using Vue2

Where I'm calling the function:

data: function () {
    return {
        ...
        form: this.$inertia.form({
            '_method': 'POST',
            name: '',
            selectedNumbers: [],
        }, {
            bag: 'createDivisionForm'
        }),
        ...
    }
},
...
watch: {
    dialog: function (v) {
        if (v && !this.$page.props.hasOwnProperty('phoneNumbers')) {
            this.getNumbers()
        } else {
            this.phoneNumbers = this.$page.props.phoneNumbers
        }
        this.getDivisionOptions()
        this.form.clearErrors() <---------------
    }
},

[ajnsn]

@TimVanHerwijnen Thank you. I tried to use this.form.clearErrors() in a watcher and it worked as expected with the mentioned versions. Maybe you could console.log(this.form) and also try to simplify your code. Just to reproduce.

Sidenote: You do not need include the _method prop inside your form data. You can simply submit the form via this.form.post('your-route') which triggers a POST request.

[claudiodekker]

Hi @TimVanHerwijnen,

Are you sure you don't have jetstream-js installed into your package.json & JS assets by any chance? This was something that was automatically being used in Laravel Jetstream 1.x, but was removed entirely in Laravel Jetstream 2.x in favor of the form helper that ships with Inertia out of the box nowadays.

Assuming this is the case, this perfectly explains why you're seeing the error that you do: When Jetstream 1.x shipped and Inertia didn't have a form helper of it's own, jetstream-js "patched" a form method onto the $inertia object, and while this was _great_ for Jetstream & Inertia users at the time, it now also causes the natively supported/documented Inertia form helper (the one you're _clearly_ trying to use) to be overwritten.

The reason for this question / assumption has to do with the way I'm seeing you define your form helper. The following two lines were only used with jetstream-js's form helper, and don't actually do anything with Inertia's native form helper:

        form: this.$inertia.form({
            '_method': 'POST',
            name: '',
            selectedNumbers: [],
-        }, {
-            bag: 'createDivisionForm'
        }),

Anyway, removing this jetstream-js dependency and migrating to Inertia's form helper shouldn't be too difficult for any of the existing (jetstream) $inertia.form's you might have, as the API's are very similar.

Hope this helps! 👍

[TimVanHerwijnen]

@claudiodekker Good observation!

The application I'm working on was originally a laravel jetstream project but we decided to replace jetstream with just inertia and vuetify. I did now know the jetstream package was overwriting the default inertia forms. I uninstalled the jetstream package (since this was still installed and enabled 🤦). And converted the forms as you suggested and that fixed my issue!

Hooray! Now I can use it! Thanks for the quick response!