ReFormer

import { createForm, type FormModel } from '@reformer/core';
import { useFormBundle } from '@reformer/core/react';
import { defineValidation, validate } from '@reformer/core/validation';
import { required, email } from '@reformer/core/validators';
import { FormField, Input, Button } from '@reformer/ui-kit';

type Contact = { email: string };

// 1. Схема — привязка поля к сигналу модели + компонент (без валидаторов)
const schema = (model: FormModel<Contact>) => ({
  children: [
    { model: model.$.email, component: Input, componentProps: { label: 'Email', type: 'email' } },
  ],
});

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

function ContactForm() {
  // 3. Сборка один раз: модель из initial, узлы формы поверх её сигналов, правила
  const bundle = useFormBundle(() =>
    createForm<Contact>({ initial: { email: '' }, schema, validation })
  );

  // 4. Отправка — один прогон правил; при замечаниях обработчик не вызывается, поля подсвечены
  const onSubmit = (event) => {
    event.preventDefault();
    void bundle.submission.submit((values) => console.log(values));
  };

  // 5. Тонкий JSX — FormField делает всю работу
  return (
    <form onSubmit={onSubmit}>
      <FormField control={bundle.form.email} />
      <Button type="submit">Отправить</Button>
    </form>
  );
}