Пошаговые формы

Длинную форму удобно разбить на шаги. Одна схема и одна форма на все шаги, а form.validate(paths) проверяет только поля текущего шага — ошибки следующих шагов пользователь не увидит раньше времени.

Пример

<script setup lang="ts">
import { ref } from 'vue';
import { object, string, pipe, email, minLength, coerce, literal } from 'tinyval';
import { useForm } from 'tinyval-vue';

const Order = object({
  name: pipe(string(), minLength(2)),
  email: pipe(string(), email()),
  city: string(),
  address: string(),
  date: coerce.date(),
  terms: literal(true),
});

const steps = [['name', 'email'], ['city', 'address'], ['date', 'terms']];
const step = ref(0);

const form = useForm(Order, {
  initial: { name: '', email: '', city: '', address: '', date: '', terms: false },
});

async function next() {
  if (await form.validate(steps[step.value])) step.value++;
}

const submit = form.handleSubmit((data) => api.post('/orders', data));
</script>

<template>
  <form @submit="submit">
    <template v-if="step === 0">
      <input v-model="form.values.name" name="name" />
      <input v-model="form.values.email" name="email" />
    </template>
    <!-- … -->
    <button v-if="step > 0" type="button" @click="step--">Back</button>
    <button v-if="step < steps.length - 1" type="button" @click="next">Next</button>
    <button v-else :disabled="form.submitting">Place order</button>
  </form>
</template>

• validate(paths) отмечает поля шага «тронутыми» — их ошибки становятся видны — и возвращает true, если в этих полях нет ошибок.
• Путь может указывать на вложенный объект или массив: validate(['address']) проверит address.city, address.street и т.д.
• На последнем шаге handleSubmit проверяет всю форму — если пользователь вернулся назад и что-то сломал, это не пропустится.

См. также

• useForm — validate
• Редактирование и черновики — сохранить введённое между шагами при перезагрузке