Inertia: Form Modals with Inertia validation handling

[sammagee]

I am attempting to build a basic "contact us" modal with Inertia. If I do a simple $inertia.post to my endpoint with the required data, I receive the shared instance of the $page.errors object, and I am able to display those errors successfully. However, if I successfully send a message, the errors are rightfully removed, but the modal stays open and the data is still in the inputs. If I use preserveState: false in $inertia.post, the modal closes and the inputs are cleared, but the same thing happens even in a validation error state.

Because of the 300 level redirect status code, I am unable to catch the validation response and use that instead of closing the modal and clearing inputs—I can't differentiate it from a regular, successful response. Looking through the docs and code, it seems this is intended and not a bug, but I am wondering if there are any best practices for this sort of pattern yet or if it might be better to use something like Axios on its own instead of Inertia's post method. I would like to use the shared errors on the $page object, like with normal forms in Inertia, but I can work with a different method if needed.

[reinink]

Yeah, honestly, at this time I haven't come up with a fantastic system for modals yet. If you want to use a modal, consider just making regular xhr requests using axios. It's something I hope to explore more with Inertia. 👍

Closing in favour of #100.

[brizzo]

I ran into a very similar scenario as described by @sammagee. I solved it by simply using the promise returned by $inertia.post to inspect if the page contained any errors. If no errors, you can reset your form, close your modal, or do whatever logic needs to happen after the post has been completed. In this case, you would want to leave preserveState as true. For example...

this.$inertia.post('/endpoint', this.form).then( () => {
    if(! this.$page.errors) {

        // close modal and/or reset form

        this.form.name = ''
        this.form.phone = ''
        ...
    }
})

[reinink]

Since I closed #100, now see #249. 👍