Ashish Bhogesara
Formst - Creating your first form with Formst (Model driven form library for react)

Formst - Creating your first form with Formst (Model driven form library for react)

Ashish Bhogesara's photo
Ashish Bhogesara
·

3 min read

The need for a form library in our application?

As our application grows in size, it can prove to be a fruitful endeavor to refactor our codebase once in a while. Using third-party libraries at this stage can help to standardize our codebase and reduce unnecessary boilerplate code. Form libraries are such third-party libraries that can help us create complex forms or complex form validation logic easily.

Why Formst ?

There are tons of third-party react form libraries available, but what makes formst standout is that its model-driven approach, has Inbuilt validation, high performance and size of just (1.7 KB). If Mobx is your fav go-to state management solution, you would be glad to know Formst uses MobX-State-Tree for validation and form structure.

Let's get started on building our first form with formst

1.Installation

# yarn
yarn add formst

# npm
npm add formst

2. Creating your form model

A form model holds the necessary information on the field types and validation logic for the fields. It can be created using createFormModel function which accepts form name, field types, and validation rules for the form fields as arguments

For our project will create a simple login form with two fields email and password.. 

// App.js

import { createFormModel, types } from "formst";

const loginFormModel = createFormModel(
  "loginForm",
  {
    email: types.string,
    password: types.string
  },
  {
    validation: {
      email: ["email", "required"],
      password: ["required"]
    }
  }
);

3. Creating an instance from our login form model

While creating an instance we can prefill the form fields as per our requirement, 

// App.js

const loginForm = loginFormModel.create({
  email: "abc@test.com",
  password: ""
});

4. Using the Observer HOC and Formst Component

The Observer HOC will help us re-render the component only when required. 

// App.js

import { createFormModel, types,  observer } from "formst";

export default observer(() => {
  return (
       <form>
        <input type="email" name="email" placeholder="email" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit"> submit </button>
      </form>
  )
});

The Formst component will be a wrapper to our login form and our loginForm instance has to be provided as a prop

// App.js

import { createFormModel, types,  observer, Formst } from "format";

  return (
    <Formst formInstance={loginForm}>
      <form>
        <input type="email" name="email" placeholder="email" />
        <input type="password" name="password" placeholder="password" />
        <button type="submit"> submit </button>
      </form>
    </Formst>
  );

5. Replacing Our input fields with Formst's Field and ErrorMessage component

The Field & error message component name has a name prop the value of the name prop should be the same as we had in our login form model

 return (
    <Formst formInstance={loginForm}>
      <form>
         <label>Email</label>
        <Field name="email" />
        <ErrorMessage name="email" />

        <br />

        <label>Password</label>
        <Field name="password" />
        <ErrorMessage name="password" />

        <br />

        <button type="submit"> submit </button>
      </form>
    </Formst>
  );

Voila, we now have our validation working

6. Disabling form submit button depending upon the form's validity

// App.js

 <button disabled={!loginForm.isValid} type="submit">
    Submit
 </button>

7. Getting form data on submission

Creating function for form submission

// App.js

const onFormSubmit = (e) => {
  e.preventDefault();
  console.log(loginForm.getFormData());
   // send data to server
}

Connecting our onFormSubmit function with our form submission

// App.js

<form onSubmit={(e) => onFormSubmit(e)}>
       <label>Email</label>
        <Field name="email" />
        <ErrorMessage name="email" />
.....

Code Sandbox Demo URL https://codesandbox.io/s/formst-demo-0euly

That's it, folks we now have successfully created our first form using formst,

To create nested forms visit here

For creating custom validation logics visit here

Thank you for reading :) Happy Tinkering

ReactJavaScriptMobXforms