A simple and versatile way of working with forms. Lightweight and dependency free.

_{Made with ❤️ by lehnihon & contributors}

Documentation

Visit https://lehnihon.github.io/ts-nano-form-docs/ to view the documentation.

Getting Started

Install

1npm install ts-nano-form

Quickstart

First initialize the main NanoForm object.

1import NanoForm from "ts-nano-form";
2
3const TsNanoForm = NanoForm();

For each form, create a component with the createForm method. Validation is done by the resolver.

1import NanoForm from "ts-nano-form";
2
3type FormUserType = {
4  name: string;
5};
6
7const resolver = (data: any) => {
8  const errors = {
9    name: "",
10  };
11  if (!data.name) errors.name = "name required";
12
13  return errors;
14};
15
16const TsNanoForm = NanoForm();
17const { createForm } = TsNanoForm;
18createForm<FormUserType>({
19  name: "form-user",
20  resolver,
21});
22export default TsNanoForm;

The fields are filled in and returned by the setValue and getValue methods

1import TsNanoForm from "./nanoForm";
2
3const { field } = TsNanoForm.getForm("form-user");
4const { getValue, setValue } = field("name");
5
6setValue("user name");
7getValue();
8//user name

The submit method validate all fields by the resolver and the fields are returned via the data parameter.

1import TsNanoForm from "./nanoForm";
2
3const { submit } = TsNanoForm.getForm("form-user");
4
5submit((data) => console.log("submit", data));

License

MIT