{"id":20424003,"url":"https://github.com/nhedger/formkit-plugin-hybridly","last_synced_at":"2025-07-09T18:33:50.547Z","repository":{"id":152244269,"uuid":"625627759","full_name":"nhedger/formkit-plugin-hybridly","owner":"nhedger","description":"FormKit plugin for Hybridly","archived":false,"fork":false,"pushed_at":"2023-10-30T20:30:05.000Z","size":124,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-12T18:48:28.871Z","etag":null,"topics":["formkit","formkit-plugin","hybridly","plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@hedger/formkit-plugin-hybridly","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nhedger.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-09T17:40:45.000Z","updated_at":"2023-10-09T03:24:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"8f8d6101-13a3-4d6d-bb5f-afa6c9ba295a","html_url":"https://github.com/nhedger/formkit-plugin-hybridly","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nhedger/formkit-plugin-hybridly","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhedger%2Fformkit-plugin-hybridly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhedger%2Fformkit-plugin-hybridly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhedger%2Fformkit-plugin-hybridly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhedger%2Fformkit-plugin-hybridly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nhedger","download_url":"https://codeload.github.com/nhedger/formkit-plugin-hybridly/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhedger%2Fformkit-plugin-hybridly/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264502387,"owners_count":23618587,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["formkit","formkit-plugin","hybridly","plugin"],"created_at":"2024-11-15T07:08:25.568Z","updated_at":"2025-07-09T18:33:50.517Z","avatar_url":"https://github.com/nhedger.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FormKit Plugin for Hybridly\n\nFormKit plugin for automatically mapping Hybridly errors to form fields.\n\n-   ⚙️ Zero-configuration.\n-   🪆 Works with deeply nested forms, groups and lists.\n\n## Installation\n\nThe FormKit plugin for Hybridly is available as an NPM package.\n\nRun one of the following commands to add the package to your project.\n\n```bash\n# npm\nnpm install @hedger/formkit-plugin-hybridly\n\n# yarn\nyarn add @hedger/formkit-plugin-hybridly\n\n# pnpm\npnpm add @hedger/formkit-plugin-hybridly\n```\n\n### Registering the plugin\n\nWhen registered, the plugin will attach itself to all root FormKit nodes that\nhave a type of `form`.\n\n```ts\nimport Hybridly from '@hedger/formkit-plugin-hybridly';\n\nexport default {\n    plugins: [Hybridly],\n};\n```\n\n## Multiple forms on the same page\n\nWhen multiple forms are present on the same page, you must specify the name of\nthe error bag to use to ensure that the correct errors are mapped to the correct\nform. Set the form's `errorBag` prop to the same name as the `errorBag` option\non the `useForm` call.\n\n```html\n\u003cscript setup\u003e\n    const loginForm = useForm({\n        method: 'POST',\n        url: '/login',\n        errorBag: 'login',\n        fields: {\n            email: '',\n            password: '',\n        },\n    });\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cFormKit\n        type=\"form\"\n        errorBag=\"login\"\n        v-model=\"loginForm.fields\"\n        @submit=\"loginForm.submit\"\u003e\n        \u003cFormKitField type=\"email\" name=\"email\" /\u003e\n        \u003cFormKitField type=\"password\" name=\"password\" /\u003e\n    \u003c/FormKit\u003e\n\u003c/template\u003e\n```\n\n## How it works\n\nThis plugins hooks into Hybridly's `navigated` event and extracts the errors\nfrom the response. It then maps the errors to the form fields by matching the\nfield name to the error key.\n\nFor example, if you have a form with a field named `email` and the response\ncontains an error with the key `email`, the error will be mapped to the `email`\nfield.\n\n## License\n\nThis plugin is open-sourced software licensed under the\n[MIT license](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhedger%2Fformkit-plugin-hybridly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnhedger%2Fformkit-plugin-hybridly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhedger%2Fformkit-plugin-hybridly/lists"}