Form

Form combines the functionalities of input masking, field validation, and form submission. Designed to build forms that ensure data is inputted in the correct format, validated in real-time, and submitted seamlessly.

Each form field can be masked, ensuring that the user inputs data in a specific format (e.g., phone numbers, dates, credit card numbers), and once validated, the entire form or individual fields can be submitted to an API or backend.

import NanoForm from "ts-nano-form";

type FormUserType = {
  name: string;
  document: string;
};

const resolver = (values: FormUserType) => {
  const errors = {} as FormUserType;
  if (!values.name) errors.name = "name required";
  if (!values.document) errors.document = "document required";

  return errors;
};

const TsNanoForm = NanoForm();

const { createForm } = TsNanoForm

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

const { submit, field } = FormUser;

field("name").setValue("John Doe");

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

console.log(field("document").getError());
// document required

Field

Field is a key functionality of a Ts Nano Form designed to manage form fields. This feature allows you to select a specific field, apply masks, and handle its submission.

It is particularly useful in situations where individual fields need to be masked independently, or when building dynamic forms with complex field interactions.

Along with validation, allows to customize how errors are handled and displayed. This ensures that the library integrates smoothly into any design or UX requirements. You can choose whether to display error messages inline, in tooltips, or handle them programmatically.

import TsNanoForm from "./nanoForm";

const { getForm } = TsNanoForm
const formUser = getForm("user");
const { submit, field } = formUser;

field("name").setValue("John Doe");
field("document").setMasked("123456", "000-000");

submit((data) => {
  console.log("FETCH", data);
});
// FETCH {name: 'John Doe', document: '123-456'}

Submit

Handle the validation and submission of form fields through a fetcher. This functionality simplifies the process of validating multiple form fields and submitting the validated data to an external service or backend API using the fetch API or a custom HTTP client.

Ensures that form fields are validated before submission. Each field can have custom or predefined validation rules.

import TsNanoForm from "./nanoForm";

const { getForm } = TsNanoForm
const formUser = getForm("user");
const { submit, field } = formUser;

field("name").setValue("John Doe");
field("document").setMasked("123456", "000-000");

const fetcher = async (data) => {
  try {
    await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
    },
   body: JSON.stringify(data),
    });
  } catch (e) {
      console.log(e);
  }
}

submit(fetcher);