Формы многошаговые

Многошаговые формы (step forms) позволяют разделить длинный процесс ввода данных на последовательные логические шаги. В Naive UI создание таких форм опирается на комбинацию компонентов NForm, NFormItem, NSteps и элементов управления, таких как кнопки NButton. Основная идея — управлять текущим шагом через реактивное состояние и показывать только соответствующие поля формы.

import { ref } from 'vue';
import { NForm, NFormItem, NInput, NButton, NSteps, NStep } from 'naive-ui';

const currentStep = ref(0);
const formData = ref({
  name: '',
  email: '',
  password: ''
});

Компонент NSteps и управление шагами

Компонент NSteps используется для визуализации прогресса пользователя. Каждый шаг определяется NStep, который может содержать заголовок и описание. Для динамического управления текущим шагом используется реактивная переменная, например currentStep.

<n-steps :current="currentStep">
  <n-step title="Личные данные"></n-step>
  <n-step title="Контактная информация"></n-step>
  <n-step title="Настройки"></n-step>
</n-steps>

Переход между шагами осуществляется через кнопки с обработчиками событий, изменяющими currentStep.

function nextStep() {
  if (currentStep.value < 2) currentStep.value += 1;
}

function prevStep() {
  if (currentStep.value > 0) currentStep.value -= 1;
}

Создание форм для каждого шага

Каждый шаг формы оборачивается в NForm, а поля определяются через NFormItem. Для многошаговой формы удобно хранить все данные в одном объекте состояния, что упрощает валидацию и отправку данных.

<n-form :model="formData" ref="formRef">
  <div v-if="currentStep === 0">
    <n-form-item label="Имя" path="name">
      <n-input v-model:value="formData.name"></n-input>
    </n-form-item>
  </div>
  <div v-if="currentStep === 1">
    <n-form-item label="Email" path="email">
      <n-input v-model:value="formData.email"></n-input>
    </n-form-item>
  </div>
  <div v-if="currentStep === 2">
    <n-form-item label="Пароль" path="password">
      <n-input type="password" v-model:value="formData.password"></n-input>
    </n-form-item>
  </div>
</n-form>

Валидация данных на каждом шаге

Naive UI предоставляет встроенную поддержку валидации через объект rules, который можно передавать в NForm. Для многошаговых форм рекомендуется проверять только текущий шаг перед переходом к следующему.

const rules = {
  name: { required: true, message: 'Введите имя', trigger: 'blur' },
  email: { type: 'email', required: true, message: 'Введите корректный email', trigger: 'blur' },
  password: { required: true, message: 'Введите пароль', trigger: 'blur' }
};

function nextStep() {
  formRef.value.validate((errors) => {
    if (!errors) {
      if (currentStep.value < 2) currentStep.value += 1;
    }
  });
}

Навигация и управление прогрессом

Для удобства пользователя добавляются кнопки «Назад» и «Далее», а также кнопка «Отправить» на последнем шаге. При этом важно учитывать, что NForm не теряет данные при переключении между шагами, если используется один объект состояния.

<div style="margin-top: 20px;">
  <n-button v-if="currentStep > 0" @click="prevStep">Назад</n-button>
  <n-button v-if="currentStep < 2" @click="nextStep">Далее</n-button>
  <n-button v-if="currentStep === 2" type="primary" @click="submitForm">Отправить</n-button>
</div>

Отправка данных и интеграция с API

На последнем шаге выполняется сбор данных и их передача на сервер. Используется единый объект formData, что упрощает процесс и снижает риск рассинхронизации полей.

async function submitForm() {
  try {
    await formRef.value.validate();
    await api.submitForm(formData.value);
    alert('Форма успешно отправлена');
  } catch (error) {
    console.error('Ошибка при отправке формы:', error);
  }
}

Продвинутые подходы

  • Динамические шаги: шаги можно генерировать из массива конфигураций, что позволяет создавать адаптивные формы, изменяющиеся в зависимости от условий.
  • Сохранение прогресса: данные текущих шагов можно сохранять в localStorage или Vuex, чтобы пользователь мог вернуться к форме позже.
  • Асинхронная валидация: проверка уникальности email или username через API на этапе валидации.

Использование многошаговых форм в Naive UI позволяет создать структурированные и удобные интерфейсы, поддерживающие плавный переход между этапами ввода данных, с надежной валидацией и гибкой интеграцией с серверной логикой.

Оглавление