Introduction

Oneki.js framework comes with a form management system handling all boilerplate codes and providing some nice features for creating complex performant forms.

The main features are as follows:

• The form is fully data-driven and values can be updated from outside the form.
• Simulate bi-directional binding between values and form fields.
• Support for complex (asynchronous) validations involving more than one field.
• Support for complex (asynchronous) rules (e.g., update a specific field when you select a value from a drop-down list).

The following diagram shows a simplified architecture of the form system:

Example

Minimal example

export const MyForm = () => {
  // useForm expects a "submit" method called when the
  // user clicks on the submit button
  const { Form } = useForm((values) => console.log(values));

  return (
    <Form>
      <div>
        <b>Name: </b>
        <Input name="lastname" />
      </div>
      <button type="submit">Submit</button>
    </Form>
  );
};

Example with validations

Open in Codesandbox

examples/cra-form-basic/src/pages/wrapper.tsx

loading...

See full example on GitHub

Learn more

The following pages describe in detail the form system:

Page	Description
useForm	Starting point to create a new form
field	How to register a field within a form
Core wrappers	How to use Oneki.js components to wrap standard Form React components to gain performance and avoid having to write boilerplate code.
Validations	How to attach validators to a field
Custom wrappers	How to create a custom wrapper around any third party form component
Initial values	How to create a form with initial values (create vs edit form)
Binding	How to create a composite value based on the value of one or more field
Rules	How to create a rule for modifying the state of the form
Context	How to get the form context from underlying components