{"id":13532349,"url":"https://github.com/ragokan/solform","last_synced_at":"2025-04-28T16:46:15.406Z","repository":{"id":50741142,"uuid":"440135357","full_name":"ragokan/solform","owner":"ragokan","description":"A form management library for SolidJS that is very lightweight and simple!","archived":false,"fork":false,"pushed_at":"2023-09-17T15:21:39.000Z","size":32,"stargazers_count":28,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T11:25:13.553Z","etag":null,"topics":["form","form-management","solidjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/solform","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ragokan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-20T10:49:46.000Z","updated_at":"2025-01-19T12:48:44.000Z","dependencies_parsed_at":"2024-06-06T05:40:57.600Z","dependency_job_id":null,"html_url":"https://github.com/ragokan/solform","commit_stats":{"total_commits":22,"total_committers":4,"mean_commits":5.5,"dds":0.2727272727272727,"last_synced_commit":"b7e85fb8ae340cac18e3f97a8b93955dbcb8ae33"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragokan%2Fsolform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragokan%2Fsolform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragokan%2Fsolform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ragokan%2Fsolform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ragokan","download_url":"https://codeload.github.com/ragokan/solform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251348226,"owners_count":21575242,"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":["form","form-management","solidjs"],"created_at":"2024-08-01T07:01:10.327Z","updated_at":"2025-04-28T16:46:15.391Z","avatar_url":"https://github.com/ragokan.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Form"],"readme":"# solform\n\n### A form management library for SolidJS that is very lightweight and simple!\n#### (UPDATE) Just wanted to say, I was busy a little bit but soon, I will update this package to latest version of everything with all the fixes.\n[![npm](https://img.shields.io/npm/v/solform?color=F53B02)](https://www.npmjs.com/package/solform)\n[![GitHub Repo stars](https://img.shields.io/github/stars/ragokan/solform?label=github%20stars)](https://github.com/ragokan/solform)\n\n### Why solform\n\n- Very easy, fast, lightweight and powerful!\n- It has built-in validation.\n- You can easily customize it!\n- Full type support\n\n### Create form\n\n```tsx\n// Simplest\nimport { createForm } from \"solform\";\n\nfunction App() {\n  const { register } = createForm\u003c{ name: string }\u003e();\n\n  return \u003cinput {...register(\"name\")} /\u003e;\n}\n```\n\n```tsx\n// Next Level\nimport { createForm, requiredValidator, emailValidator } from \"solform\";\n\nfunction App() {\n  const { register, submit, errors } = createForm\u003c{\n    email: string;\n    count: number;\n  }\u003e({\n    validators: {\n      count: requiredValidator(\"Count is required\"),\n      email: [\n        requiredValidator(\"This field is required\"),\n        emailValidator(\"Value should be email!\"),\n      ],\n    },\n    onSubmit: (values) =\u003e {\n      // type safe values\n      console.log(values);\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput {...register(\"email\")} type=\"email\" /\u003e\n      {errors.email \u0026\u0026 \u003cp class=\"error\"\u003e{errors.email}\u003c/p\u003e}\n\n      {/* When you read count, it will be converted to number */}\n      \u003cinput {...register(\"count\")} type=\"number\" /\u003e\n      \u003cbutton onClick={submit}\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n```tsx\n// Full\nimport { createForm, requiredValidator, emailValidator } from \"solform\";\n\nfunction App() {\n  const { register, submit, loading, getAllValues, getValue, setValue, errors, watch } =\n    createForm\u003c{ email: string; count: number }\u003e({\n      initialValues: {\n        count: 0,\n      },\n      validators: {\n        count: requiredValidator(\"Count is required\"),\n        email: [\n          requiredValidator(\"This field is required\"),\n          emailValidator(\"Value should be email!\"),\n        ],\n      },\n      onSubmit: async (values) =\u003e {\n        await sleep(2000); // it will automatically set loading to true\n        console.log(values);\n        // loading is false again\n      },\n    });\n\n  // will call the given function whenever the count changes\n  watch(\"count\", (updatedCount) =\u003e {\n    console.log(updatedCount);\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput {...register(\"email\")} type=\"email\" /\u003e\n      {errors.email \u0026\u0026 \u003cp class=\"error\"\u003e{errors.email}\u003c/p\u003e}\n      {/* When you read count, it will be converted to number */}\n      \u003cinput {...register(\"count\")} type=\"number\" /\u003e\n      \u003cbutton onClick={submit} disabled={loading()}\u003e\n        {loading() ? \"Loading...\" : \"Submit\"}\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nfunction sleep(arg0: number) {\n  throw new Error(\"Function not implemented.\");\n}\n```\n\n### Built-in validators\n\n- minLengthValidator(minLength, errorMessage)\n- maxLengthValidator(maxLength, errorMessage)\n- requiredValidator(errorMessage)\n- emailValidator(errorMessage)\n\n### Creating new validators\n\n```ts\nconst minimumNumberValidator =\n  (minNumber: number, errorMessage: string): SolFormValidator\u003cnumber\u003e =\u003e\n  (val) =\u003e\n    val \u003c minNumber ? errorMessage : undefined;\n```\n\n### Tactics\n\n- Always use **watch** inside a component, because it will call **onMount** and **onCleanup**.\n- More soon...\n\n### What is next?\n\n- Support for more fields, such as **radio group**\n- Validate on change option.\n\n### How to contribute?\n\n- Get a fork of this package, do your changes and create a pull request.\n- Found a bug? create an issue.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragokan%2Fsolform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fragokan%2Fsolform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fragokan%2Fsolform/lists"}