Данные формы

В форме три «версии» данных и два набора ошибок. Здесь — что где лежит и как меняется по ходу заполнения. Все значения ниже — настоящий вывод tinyval-vue.

const Signup = object({
  name: pipe(string(), trim(), minLength(2)),
  email: pipe(string(), email()),
  age: optional(pipe(coerce.number(), min(18))),
});

const form = useForm(Signup, { initial: { name: '', email: '', age: '' } });

values, data и changes

Поле	Что внутри	Пример	Для чего
form.values	То, что ввёл пользователь, как есть	{ name: ' Ivan ', email: 'ivan@mail.ru', age: '30' }	v-model
form.data	Проверенные данные после схемы: trim, coerce, без лишних полей. undefined, пока есть ошибки	{ name: 'Ivan', email: 'ivan@mail.ru', age: 30 }	Предпросмотр, вычисления
данные в handleSubmit	То же, что form.data, в момент отправки	{ name: 'Ivan', email: 'ivan@mail.ru', age: 30 }	Отправка на сервер
form.changes	Только изменённые поля, как ввёл пользователь (из values)	{ email: 'petr@mail.ru' }	PATCH — см. Редактирование

Тип values берётся из initial (в инпутах — строки), тип data — из схемы (age: number).

errors и allErrors

Поле	Что внутри
form.allErrors	Все текущие ошибки схемы и сервера — сразу, даже до того, как пользователь что-то ввёл
form.errors	Только те, что пора показать: с полей, которые пользователь покинул, после отправки — все. Плюс ошибки сервера

Формат — как errors в tinyval: путь через точку → текст первой ошибки. Подробнее о путях и текстах — Результат проверки.

Как меняется состояние

Пользователь заполняет форму регистрации:

Шаг	errors	allErrors	valid	dirty	submitted	submitCount	submitSucceeded	data
1. Форма открыта	{}	name, email: Required	false	false	false	0	false	undefined
2. Ввёл в имя ' I'	{}	name: Must be at least 2 characters long, email: Required	false	true	false	0	false	undefined
3. Ушёл с поля имени	name: Must be at least 2 characters long	как на шаге 2	false	true	false	0	false	undefined
4. Нажал «Отправить»	name, email — все ошибки видны	как на шаге 2	false	true	true	1	false	undefined
5. Исправил, сервер ответил 422	email: The email has already been taken.	то же	false	true	true	2	false	{ name: 'Ivan', … }
6. Сменил email, отправил	{}	{}	true	false	true	3	true	{ name: 'Ivan', email: 'petr@mail.ru', age: 30 }

Что видно из таблицы:

• Ошибки считаются сразу (allErrors на шаге 1), а показываются, когда пользователь ушёл с поля или нажал «Отправить».
• Ошибка сервера попадает в errors и делает valid ложным, но data остаётся — данные-то прошли проверку схемы. Ошибка исчезнет, когда пользователь изменит это поле.
• После успешной отправки dirty снова false, а changes пустой: текущие значения считаются сохранёнными.

Что приходит в handleSubmit

Только если форма прошла проверку, и только проверенные данные — после trim и coerce:

// form.values: { name: ' Ivan ', email: 'petr@mail.ru', age: '30' }
const submit = form.handleSubmit((data) => {
  data; // { name: 'Ivan', email: 'petr@mail.ru', age: 30 }
});

Ошибки в onInvalid — видимые ошибки (form.errors) на момент отправки, то есть все.

Остальные поля

Поле	Значение
touched	Поля, с которых уходили: { name: true }. Путь как в errors
validating	true, пока идёт асинхронная проверка
submitting	true, пока выполняется обработчик handleSubmit
id	Основа для id полей

Полный список — useForm.

См. также

• useForm
• Результат проверки — формат ошибок и данных в tinyval