null
form data (#417, #575).The form helper now automatically remembers form data and errors. Previously you had to do this manually:
// Options API
remember: 'form'
// Composition API
useRemember(useForm({ ... }))
Doing this automatically is not only easier, but it's also more in line with default browser behaviour.
If you need to disable this behaviour, you can do that using the new remember
form helper option (see below).
The form helper now accepts a second "options" argument. This lets you set a form key
, needed if there are multiple forms on the page. You can also disable the automatic remember behaviour by setting the remember
option to false
.
let form = useForm({
email: null,
password: null,
}, {
key: 'login',
remember: false,
})
This release fixes a tricky, edge case issue with the form helper, where the preserveState
and preserveScroll
visit callbacks didn't have access to the updated form state until it was too late.
preserveScroll: () => this.form.hasErrors, // old form values
preserveState: () => this.form.hasErrors, // old form values
The workaround was to use the page
object passed to these callbacks instead. Unfortunately, this is kind of verbose.
preserveScroll: (page) => Object.keys(page.props.errors).length > 0,
preserveState: (page) => Object.keys(page.props.errors).length > 0,
This issue has now been corrected, and you can reference the form helper methods and properties directly within these callbacks without issue.