ReFormer

import { createModel, createForm, validateFormModel } from '@reformer/core';
import { required, email } from '@reformer/core/validators';
import { FormField, Input, Button } from '@reformer/ui-kit';

// 1. Модель — источник истины значений
const model = createModel<{ email: string }>({ email: '' });

// 2. Схема — привязка поля к сигналу + компонент + валидаторы
const schema = {
  email: {
    value: model.$.email,
    component: Input,
    componentProps: { label: 'Email', type: 'email' },
    validators: [required(), email()],
  },
};

// 3. Форма — узлы поверх сигналов модели
const form = createForm({ model, schema });

// 4. Тонкий JSX — FormField делает всю работу
function ContactForm() {
  const onSubmit = async (e) => {
    e.preventDefault();
    const { valid } = await validateFormModel(model, schema);
    if (valid) console.log(model.get());
  };
  return (
    <form onSubmit={onSubmit}>
      <FormField control={form.email} />
      <Button type="submit">Отправить</Button>
    </form>
  );
}