Компонент Form

Компонент Form в библиотеке Naive UI предназначен для создания управляемых форм с поддержкой валидации, настройки стилей и интеграции с различными элементами интерфейса. В отличие от обычных HTML-форм, n-form предоставляет декларативный подход, где структура данных, правила валидации и поведение формы описываются через объекты и свойства.

import { NForm, NFormItem, NInput, NButton } from 'naive-ui';

Создание базовой формы предполагает использование NForm в качестве контейнера, а NFormItem — для каждого поля:

<NForm v-model:value="formData" :rules="rules">
  <NFormItem label="Имя" path="name">
    <NInput v-model:value="formData.name" placeholder="Введите имя" />
  </NFormItem>
  <NFormItem label="Email" path="email">
    <NInput v-model:value="formData.email" placeholder="Введите email" />
  </NFormItem>
  <NFormItem>
    <NButton type="primary" @click="submitForm">Отправить</NButton>
  </NFormItem>
</NForm>

Управление данными формы

Свойство v-model:value связывает форму с объектом состояния. Все изменения в полях автоматически синхронизируются с этим объектом. Например:

const formData = reactive({
  name: '',
  email: ''
});

Использование реактивного объекта обеспечивает мгновенное обновление интерфейса при изменении данных.

Валидация формы

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

const rules = {
  name: [
    { required: true, message: 'Имя обязательно', trigger: 'blur' },
    { min: 3, message: 'Минимум 3 символа', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Email обязателен', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат email', trigger: 'blur' }
  ]
};

Каждое правило может содержать:

  • required — обязательность заполнения
  • min/max — ограничения длины
  • pattern — регулярное выражение
  • type — тип значения (string, number, email)
  • message — сообщение об ошибке
  • trigger — событие, при котором выполняется проверка (blur, change).

Методы формы

Компонент NForm предоставляет методы для программного управления:

  • validate() — проверка всех полей формы, возвращает промис с результатом проверки.
  • validateField(fieldPath) — проверка одного поля по пути.
  • reset() — сброс значений формы к начальному состоянию.
  • restoreValidation() — сброс всех сообщений валидации.

Пример использования:

const formRef = ref(null);

function submitForm() {
  formRef.value.validate().then(() => {
    console.log('Форма валидна:', formData);
  }).catch(errors => {
    console.log('Ошибки формы:', errors);
  });
}

Кастомизация визуального отображения

Naive UI позволяет настраивать внешний вид формы через props:

  • labelPlacement — положение метки: left, top, right.
  • labelWidth — ширина колонки с метками.
  • size — размер элементов: small, medium, large.
  • inline — режим горизонтальной формы.

Пример:

<NForm v-model:value="formData" :rules="rules" labelPlacement="top" labelWidth="120" size="medium" inline>
  ...
</NForm>

Вложенные и динамические формы

NForm поддерживает вложенные структуры данных, что удобно для сложных форм с объектами и массивами:

const formData = reactive({
  user: { name: '', email: '' },
  addresses: [
    { street: '', city: '' }
  ]
});

Для массивов удобно использовать v-for и динамическое добавление/удаление элементов:

<NFormItem v-for="(address, index) in formData.addresses" :key="index" :label="`Адрес ${index+1}`" :path="`addresses.${index}.street`">
  <NInput v-model:value="address.street" placeholder="Улица" />
</NFormItem>

Интеграция с другими компонентами

Любой компонент Naive UI, поддерживающий v-model:value, может быть использован внутри NFormItem, включая:

  • NInput, NInputNumber
  • NSelect, NDatePicker
  • NCheckbox, NRadioGroup

Это обеспечивает единую обработку состояния и валидации через форму, без необходимости вручную отслеживать изменения каждого поля.

Примеры расширенного применения

  • Формы регистрации с многошаговой валидацией.
  • Формы редактирования с предзаполнением данных через API.
  • Динамические формы, где поля добавляются в зависимости от действий пользователя.

Использование NForm делает код чистым и управляемым, позволяет централизованно управлять валидацией и состоянием, а также легко интегрируется с другими компонентами Naive UI, создавая единый пользовательский интерфейс.

Оглавление