Introduction

Forms values and validation rules are part of the business logic. This means that you need to be able to work with them without being bound to the UI-framework.

The goal of this project is to combine Final Form and Effector to achieve the above.

Installation

Be careful

You need to have installed effector and final-form packages

yarn add effector-final-form
# or
npm add effector-final-form
# or
pnpm add effector-final-form

Usage

Just import from the root module:

import { createForm } from 'effector-final-form';

You can use the Final Form documentation as a basis, but the effector-final-form has differences and limitations.

Example based on Final Form React demo

Base Example

import { createForm } from 'effector-final-form';

const form = createForm<{ login: string; password: string }>({
  onSubmit: console.log,
  subscribeOn: ['submitSucceeded', 'submitting'],
});

const loginField = form.api.registerField({
  name: 'login',
  subscribeOn: ['value', 'error', 'validating'],
  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect login'),
});

loginField.$.watch(console.log);
// {name: "login", value: null, error: null, validating: true}
// {name: "login", error: "Incorrect login", value: null, validating: false}

const passwordField = form.api.registerField({
  name: 'password',
  subscribeOn: ['value', 'error', 'validating'],
  validate: (x) => (x?.length >= 3 ? undefined : 'Incorrect password'),
});

passwordField.$.watch(console.log);
// {name: "password", value: null, error: null, validating: true}
// {name: "password", error: "Incorrect password", value: null, validating: false}

loginField.api.changeFx('John');
// {name: "login", error: null, value: "John", validating: true}
// {name: "login", error: null, value: "John", validating: false}
passwordField.api.changeFx('secret');
// {name: "password", error: null, value: "secret", validating: true}
// {name: "password", error: null, value: "secret", validating: false}
form.api.submitFx();
// {login: "John", password: "secret"}