v0.5.0

🆕 Submit States and Errors

We added new submit states to the useForm which will allow you to build submit-only error display and more.

Added wasSubmitted state (#91)

This property is true if the form was submitted and the handler was called without any errors thrown. This is useful when you want to show a success message after the form has been submitted.

Added isSubmitAttempted (#90)

This property is true if the form was submitted, but unlike wasSubmitted, it turns true even if the form is invalid.

Added submitAttemptsCount (#92)

This property represents the number of times the form has been submitted regardless of whether it was valid or not.

This can be useful when you want to disable certain UI elements, or show some feedback to the user. You might even want to gather analytics! maybe your form is too hard?

Added submitErrors and submitErrorMessage (#89)

Unlike validation errors which are mostly "live" and react to the values changing regardless of when you display them, submit errors are only populated when the form is submitted. This is useful if you want to only show errors after submits rather than live which could be too aggressive for your needs.

Each field exposes submitErrorMessage and submitErrors, using these will only display errors after the form is submitted.

import { useTextField } from '@formwerk/core';

const { submitErrorMessage, submitErrors } = useTextField({
  // ...
});

Forms also expose getSubmitError and getSubmitErrors to get the submit error of a specific field or all fields respectively, if you need access to them on the form level.

For more information and live examples check the forms guide in the docs 📚.

    View changes on GitHub

Thanks to @s8n11c