{"id":24778541,"url":"https://github.com/domutala/formons","last_synced_at":"2025-03-24T02:29:48.103Z","repository":{"id":247296336,"uuid":"825474387","full_name":"domutala/formons","owner":"domutala","description":"Formons is a powerful tool designed to simplify the creation of interactive forms in development.","archived":false,"fork":false,"pushed_at":"2024-07-20T22:08:00.000Z","size":228,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T23:18:17.987Z","etag":null,"topics":["form","form-validation","framwork"],"latest_commit_sha":null,"homepage":"","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/domutala.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":"2024-07-07T21:57:57.000Z","updated_at":"2024-07-20T20:23:12.000Z","dependencies_parsed_at":"2024-07-07T23:23:45.982Z","dependency_job_id":"2f0b4c98-82ef-4d34-bf1b-35a516990692","html_url":"https://github.com/domutala/formons","commit_stats":null,"previous_names":["domutala/formons"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domutala%2Fformons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domutala%2Fformons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domutala%2Fformons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/domutala%2Fformons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/domutala","download_url":"https://codeload.github.com/domutala/formons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245198216,"owners_count":20576339,"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-validation","framwork"],"created_at":"2025-01-29T08:37:41.891Z","updated_at":"2025-03-24T02:29:48.084Z","avatar_url":"https://github.com/domutala.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# formons\r\n\r\n## What is Formons? 📝\r\n\r\nFormons is a powerful tool designed to simplify the creation of interactive forms in development. Whether you're using React, Vue.js, Angular, or any other JavaScript framework, Formons offers a flexible, framework-agnostic solution for managing forms.\r\n\r\n## Key Features 🛠️\r\n\r\n- **Building complex forms**: With Formons, you can easily create forms containing various types of fields such as text, numeric, select, checkboxes, etc. Its flexibility allows effortless management of complex form structures.\r\n\r\n- **Framework independence**: Unlike other solutions that may be specific to a particular framework, Formons is designed to be used with any JavaScript framework. This means you can easily integrate it into your existing project, regardless of the front-end technology you are using.\r\n\r\nIn summary, Formons provides a robust and versatile solution to simplify the creation and management of forms in your web projects, irrespective of the framework you are using.\r\n\r\n## install\r\n\r\n```bash\r\n# yarn\r\nyarn add formons\r\n\r\n# npm\r\nnpm install formons\r\n```\r\n\r\n## usage\r\n\r\n```html\r\n\u003cform id=\"form\"\u003e\r\n  \u003cinput type=\"text\" formons-shema=\"name\" placeholder=\"name\" /\u003e\r\n  \u003cinput type=\"number\" formons-shema=\"age\" placeholder=\"age\" /\u003e\r\n  \u003cbutton type=\"submit\"\u003eClick me\u003c/button\u003e\r\n\u003c/form\u003e\r\n```\r\n\r\n```ts\r\nimport { create, validators } from \"formons\";\r\n\r\nconst model = create({\r\n  schemaOptions: [\r\n    {\r\n      key: \"name\",\r\n\r\n      validators: [\r\n        {\r\n          fn: validators.required,\r\n          args: [\"name\"],\r\n        },\r\n        {\r\n          fn: function (model, length: number) {\r\n            if (typeof model.formValues.name !== \"undefined\") {\r\n              if (`${model.formValues.name}`.length !== length) {\r\n                model.schemas[model.schemasIndex.name].errors!.push(\r\n                  `name_length_must_be_${length}`\r\n                );\r\n              }\r\n            }\r\n\r\n            return model;\r\n          },\r\n          args: [5],\r\n        },\r\n      ],\r\n    },\r\n    {\r\n      key: \"age\",\r\n\r\n      validators: [\r\n        {\r\n          fn: validators.number,\r\n          args: [\"age\"],\r\n        },\r\n      ],\r\n    },\r\n  ],\r\n});\r\n\r\nmodel.mount(document.querySelector(\"#form\"));\r\n```\r\n\r\n## validators\r\n\r\nIn order to be able to execute validators by priority, they have been transformed into an array since version 0.2.0. Validator priority based on schema order and order of arrival in `Schema.validators`.\r\n\r\n```ts\r\nexport interface SchemaInterface {\r\n  /** formons-shema=\"key\" */\r\n  el?: Element;\r\n  [key: string]: any;\r\n}\r\n\r\nexport interface Schema {\r\n  // --\r\n\r\n  /**\r\n   * validation functions are called before submitting form and after `Schema.onBeforeSubmit`.\r\n   * They can also be called directly with the `Model.validate` function.\r\n   *\r\n   * The aim is to fill in `Model.isFormValid` and update `Schema.errors`.\r\n   *\r\n   * Validator priority based on schema order and order of arrival in `Schema.validators`.\r\n   * */\r\n  validators: Array\u003cSchemaValidator\u003e;\r\n\r\n  // ---\r\n}\r\n```\r\n\r\n## Events 🆕\r\n\r\nExecute functions at different stages of your form.\r\n\r\n```ts\r\nexport interface Schema {\r\n  // ---\r\n\r\n  events: SchemaEvents;\r\n\r\n  // ---\r\n}\r\n\r\nexport interface SchemaEvents {\r\n  /** After creating the model */\r\n  onModelCreated?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n\r\n  /** This function is called after the `Model.mount` function has been called. */\r\n  onMounted?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n\r\n  /** this function is called before the form is submitted */\r\n  onBeforeSubmit?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n\r\n  /** custom event like `onSave` for example  */\r\n  [funcName: string]:\r\n    | ((key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e)\r\n    | undefined;\r\n}\r\n```\r\n\r\n### onModelCreated\r\n\r\nAfter creating the model\r\n\r\n```ts\r\nonModelCreated?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n```\r\n\r\n#### Example\r\n\r\n```ts\r\nawait create({\r\n  schemaOptions: [\r\n    {\r\n      key: \"name\",\r\n      events: {\r\n        async onModelCreated(key, model) {\r\n          // your logic here\r\n\r\n          return model;\r\n        },\r\n      },\r\n    },\r\n  ],\r\n});\r\n```\r\n\r\n### onMounted\r\n\r\nThis function is called after the `Model.mount` function has been called.\r\n\r\n```ts\r\nonMounted?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n```\r\n\r\n#### Example\r\n\r\n```ts\r\nconst model = await create({\r\n  schemaOptions: [{ key: \"test\" }],\r\n\r\n  onFormValuesChanged(model) {\r\n    onFormValuesChangedSpy(model);\r\n  },\r\n});\r\n```\r\n\r\n```ts\r\nonBeforeSubmit?: (key: string, model: Model) =\u003e Model | Promise\u003cModel\u003e;\r\n```\r\n\r\n### custom event\r\n\r\ncustom event like `onSave` for example\r\n\r\n#### Example\r\n\r\n```ts\r\nconst model = await create({\r\n  schemaOptions: [\r\n    {\r\n      key: \"name\",\r\n      events: {\r\n        async onBeforeSave(key, model) {\r\n          return model;\r\n        },\r\n      },\r\n    },\r\n  ],\r\n});\r\n\r\nfunction saveData(model: Model) {\r\n  model.schemas.forEach((schema) =\u003e {\r\n    if (schema.events.onBeforeSave) {\r\n      schema.events.onBeforeSave(schema.key, model);\r\n    }\r\n  });\r\n}\r\n\r\nsaveData(model);\r\n```\r\n\r\n## Author\r\n\r\n\u003cimg width=\"48\" style=\"border-radius: 100%\" src=\"https://avatars.githubusercontent.com/u/33329431\" alt=\"Mamadou DIA - domutala\"\u003e\r\n\r\nMamadou [@domutala](https://github.com/domutala)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdomutala%2Fformons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdomutala%2Fformons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdomutala%2Fformons/lists"}