{"id":16923341,"url":"https://github.com/sanichkotikov/solid-create-form","last_synced_at":"2025-03-22T11:30:59.851Z","repository":{"id":57365889,"uuid":"410745873","full_name":"SanichKotikov/solid-create-form","owner":"SanichKotikov","description":"A tiny Solid utility to control forms.","archived":false,"fork":false,"pushed_at":"2024-09-16T09:41:37.000Z","size":132,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T10:51:30.324Z","etag":null,"topics":["form","forms","no-dependencies","npm-module","npm-package","solid-js","tiny-library"],"latest_commit_sha":null,"homepage":"","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/SanichKotikov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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},"funding":{"custom":["https://money.yandex.ru/to/410013821917728/","https://www.paypal.me/cdrpro/"]}},"created_at":"2021-09-27T04:53:48.000Z","updated_at":"2024-09-16T09:41:40.000Z","dependencies_parsed_at":"2024-10-28T13:17:12.552Z","dependency_job_id":"21822455-6eb6-4149-af14-b5b75f5e5e03","html_url":"https://github.com/SanichKotikov/solid-create-form","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"b62288cd5ffb757fa7bfd2b60c09af8306dcd68b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanichKotikov%2Fsolid-create-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanichKotikov%2Fsolid-create-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanichKotikov%2Fsolid-create-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SanichKotikov%2Fsolid-create-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SanichKotikov","download_url":"https://codeload.github.com/SanichKotikov/solid-create-form/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244951222,"owners_count":20537339,"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","forms","no-dependencies","npm-module","npm-package","solid-js","tiny-library"],"created_at":"2024-10-13T19:58:46.570Z","updated_at":"2025-03-22T11:30:59.564Z","avatar_url":"https://github.com/SanichKotikov.png","language":"TypeScript","funding_links":["https://money.yandex.ru/to/410013821917728/","https://www.paypal.me/cdrpro/"],"categories":[],"sub_categories":[],"readme":"# solid-create-form\n\nA tiny (~644 B) Solid utility to control forms.\n\nPlease note, this library assumes that `onChange` has the following interface: `(value: T) =\u003e void;`. So if your\ncontrols call onChange with event instead of new value, you may need write some simple wrapper for form handlers.\n\n## Usage\n\n```typescript jsx\nimport { createForm } from 'solid-create-form';\n\nimport { Input } from 'custom/Input';\n\ninterface FormValues {\n  login: string;\n  password: string;\n}\n\nexport function ExampleForm() {\n  const onSubmit = (data: FormValues) =\u003e console.log(data);\n\n  const { values, handlers, wrapSubmit } = createForm\u003cFormValues\u003e({\n    defaultValues: { login: '', password: '' },\n  });\n\n  return (\n    \u003cform onSubmit={wrapSubmit(onSubmit)}\u003e\n      \u003cInput\n        placeholder=\"Login\"\n        value={values().login}\n        onChange={handlers.login}\n      /\u003e\n      \u003cInput\n        placeholder=\"Password\"\n        type=\"password\"\n        value={values().password}\n        onChange={handlers.password}\n      /\u003e\n      \u003cinput type=\"submit\" /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n### Validation rules\n\nYou can set validation rules for each field:\n\n```typescript jsx\nfunction required(value: string): boolean | string {\n  return !!value.trim() || 'Required field';\n}\n\nconst {} = createForm\u003cFormValues\u003e({\n  defaultValues: { login: '', password: '' },\n  rules: { login: [required], password: [required] }\n});\n```\n\nAll rules will be checked on first submit event. After that any changes will trigger revalidation for changed field.\n\nRule function takes two arguments, value of current field and values of all fields. So, you can compare different\nfields, for example in create or change password form:\n\n```typescript jsx\nfunction samePassword(confirm: string, values: FormValues): boolean | string {\n  return confirm === values.password || 'Passwords do not match. Please try again.';\n}\n\nconst {} = createForm\u003cFormValues\u003e({\n  defaultValues: { password: '', confirm: '' },\n  rules: { password: [required], confirm: [samePassword] },\n});\n```\n\nPlease note that values object contains previous value of current field during revalidation.\n\n### Set errors manually\n\nFor example for errors that comes from server.\n\n```typescript jsx\nconst { setErrors } = createForm\u003cFormValues\u003e();\nconst someAction = () =\u003e {\n  setErrors({ password: 'Some error text' });\n};\n```\n\n### Checking that form has changed values\n\n```typescript jsx\nconst { isDirty } = createForm\u003cFormValues\u003e();\n\u003cinput type=\"submit\" disabled={!isDirty()} /\u003e\n```\n\n### Checking that form data is valid\n\n```typescript jsx\nconst { isValid } = createForm\u003cFormValues\u003e();\n\u003cinput type=\"submit\" disabled={!isValid()} /\u003e\n```\n\n### Resetting form values\n\n```typescript jsx\nconst { reset } = createForm\u003cFormValues\u003e();\n\u003cinput type=\"button\" onClick={() =\u003e reset()}\u003eReset\u003c/input\u003e\n```\n\nWith reset function you can set new initial values:\n\n```typescript jsx\nconst { reset } = createForm\u003cFormValues\u003e();\n\u003cinput type=\"button\" onClick={() =\u003e reset({ field: 'new value' })}\u003eReset\u003c/input\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanichkotikov%2Fsolid-create-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsanichkotikov%2Fsolid-create-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsanichkotikov%2Fsolid-create-form/lists"}