https://github.com/nhedger/formkit-plugin-hybridly
FormKit plugin for Hybridly
https://github.com/nhedger/formkit-plugin-hybridly
formkit formkit-plugin hybridly plugin
Last synced: 11 months ago
JSON representation
FormKit plugin for Hybridly
- Host: GitHub
- URL: https://github.com/nhedger/formkit-plugin-hybridly
- Owner: nhedger
- License: mit
- Created: 2023-04-09T17:40:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-30T20:30:05.000Z (over 2 years ago)
- Last Synced: 2025-04-12T18:48:28.871Z (about 1 year ago)
- Topics: formkit, formkit-plugin, hybridly, plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@hedger/formkit-plugin-hybridly
- Size: 121 KB
- Stars: 10
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# FormKit Plugin for Hybridly
FormKit plugin for automatically mapping Hybridly errors to form fields.
- ⚙️ Zero-configuration.
- 🪆 Works with deeply nested forms, groups and lists.
## Installation
The FormKit plugin for Hybridly is available as an NPM package.
Run one of the following commands to add the package to your project.
```bash
# npm
npm install @hedger/formkit-plugin-hybridly
# yarn
yarn add @hedger/formkit-plugin-hybridly
# pnpm
pnpm add @hedger/formkit-plugin-hybridly
```
### Registering the plugin
When registered, the plugin will attach itself to all root FormKit nodes that
have a type of `form`.
```ts
import Hybridly from '@hedger/formkit-plugin-hybridly';
export default {
plugins: [Hybridly],
};
```
## Multiple forms on the same page
When multiple forms are present on the same page, you must specify the name of
the error bag to use to ensure that the correct errors are mapped to the correct
form. Set the form's `errorBag` prop to the same name as the `errorBag` option
on the `useForm` call.
```html
const loginForm = useForm({
method: 'POST',
url: '/login',
errorBag: 'login',
fields: {
email: '',
password: '',
},
});
```
## How it works
This plugins hooks into Hybridly's `navigated` event and extracts the errors
from the response. It then maps the errors to the form fields by matching the
field name to the error key.
For example, if you have a form with a field named `email` and the response
contains an error with the key `email`, the error will be mapped to the `email`
field.
## License
This plugin is open-sourced software licensed under the
[MIT license](LICENSE.md).