https://github.com/domutala/formons
Formons is a powerful tool designed to simplify the creation of interactive forms in development.
https://github.com/domutala/formons
form form-validation framwork
Last synced: over 1 year ago
JSON representation
Formons is a powerful tool designed to simplify the creation of interactive forms in development.
- Host: GitHub
- URL: https://github.com/domutala/formons
- Owner: domutala
- Created: 2024-07-07T21:57:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-20T22:08:00.000Z (almost 2 years ago)
- Last Synced: 2025-03-19T23:18:17.987Z (over 1 year ago)
- Topics: form, form-validation, framwork
- Language: TypeScript
- Homepage:
- Size: 223 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# formons
## What is Formons? 📝
Formons 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.
## Key Features 🛠️
- **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.
- **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.
In 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.
## install
```bash
# yarn
yarn add formons
# npm
npm install formons
```
## usage
```html
Click me
```
```ts
import { create, validators } from "formons";
const model = create({
schemaOptions: [
{
key: "name",
validators: [
{
fn: validators.required,
args: ["name"],
},
{
fn: function (model, length: number) {
if (typeof model.formValues.name !== "undefined") {
if (`${model.formValues.name}`.length !== length) {
model.schemas[model.schemasIndex.name].errors!.push(
`name_length_must_be_${length}`
);
}
}
return model;
},
args: [5],
},
],
},
{
key: "age",
validators: [
{
fn: validators.number,
args: ["age"],
},
],
},
],
});
model.mount(document.querySelector("#form"));
```
## validators
In 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`.
```ts
export interface SchemaInterface {
/** formons-shema="key" */
el?: Element;
[key: string]: any;
}
export interface Schema {
// --
/**
* validation functions are called before submitting form and after `Schema.onBeforeSubmit`.
* They can also be called directly with the `Model.validate` function.
*
* The aim is to fill in `Model.isFormValid` and update `Schema.errors`.
*
* Validator priority based on schema order and order of arrival in `Schema.validators`.
* */
validators: Array;
// ---
}
```
## Events 🆕
Execute functions at different stages of your form.
```ts
export interface Schema {
// ---
events: SchemaEvents;
// ---
}
export interface SchemaEvents {
/** After creating the model */
onModelCreated?: (key: string, model: Model) => Model | Promise;
/** This function is called after the `Model.mount` function has been called. */
onMounted?: (key: string, model: Model) => Model | Promise;
/** this function is called before the form is submitted */
onBeforeSubmit?: (key: string, model: Model) => Model | Promise;
/** custom event like `onSave` for example */
[funcName: string]:
| ((key: string, model: Model) => Model | Promise)
| undefined;
}
```
### onModelCreated
After creating the model
```ts
onModelCreated?: (key: string, model: Model) => Model | Promise;
```
#### Example
```ts
await create({
schemaOptions: [
{
key: "name",
events: {
async onModelCreated(key, model) {
// your logic here
return model;
},
},
},
],
});
```
### onMounted
This function is called after the `Model.mount` function has been called.
```ts
onMounted?: (key: string, model: Model) => Model | Promise;
```
#### Example
```ts
const model = await create({
schemaOptions: [{ key: "test" }],
onFormValuesChanged(model) {
onFormValuesChangedSpy(model);
},
});
```
```ts
onBeforeSubmit?: (key: string, model: Model) => Model | Promise;
```
### custom event
custom event like `onSave` for example
#### Example
```ts
const model = await create({
schemaOptions: [
{
key: "name",
events: {
async onBeforeSave(key, model) {
return model;
},
},
},
],
});
function saveData(model: Model) {
model.schemas.forEach((schema) => {
if (schema.events.onBeforeSave) {
schema.events.onBeforeSave(schema.key, model);
}
});
}
saveData(model);
```
## Author
Mamadou [@domutala](https://github.com/domutala)