ReFormer

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

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

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

// 3. Валидация — отдельный слой
const validation = defineValidationSchema<{ email: string }>(({ model }) => {
  validate(model.$.email, [required(), email()]);
});

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

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