ts-nano-form

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

npm install ts-nano-form

Quickstart

First initialize the main NanoForm object.

import NanoForm from "ts-nano-form";

const TsNanoForm = NanoForm();

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

import NanoForm from "ts-nano-form";

type FormUserType = {
  name: string;
};

const resolver = (data: any) => {
  const errors = {
    name: "",
  };
  if (!data.name) errors.name = "name required";

  return errors;
};

const TsNanoForm = NanoForm();
const { createForm } = TsNanoForm;
createForm<FormUserType>({
  name: "form-user",
  resolver,
});
export default TsNanoForm;

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

import TsNanoForm from "./nanoForm";

const { field } = TsNanoForm.getForm("form-user");
const { getValue, setValue } = field("name");

setValue("user name");
getValue();
//user name

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

import TsNanoForm from "./nanoForm";

const { submit } = TsNanoForm.getForm("form-user");

submit((data) => console.log("submit", data));

License

MIT