Синхронизация состояния форм

В Element Plus управление состоянием форм строится на концепции реактивных данных Vue. Компоненты форм (el-form, el-form-item) тесно интегрированы с объектами данных, что позволяет автоматически отслеживать изменения полей и управлять валидацией.

Привязка данных через v-model

Каждое поле формы в Element Plus связывается с объектом модели с помощью директивы v-model. Например:

<template>
  <el-form :model="formData">
    <el-form-item label="Имя">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Возраст">
      <el-input-number v-model="formData.age"></el-input-number>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: null
      }
    };
  }
};
</script>
  • formData — реактивный объект, автоматически обновляющийся при изменении полей формы.
  • Любое изменение значения поля мгновенно отражается в модели, что позволяет легко работать с данными и отправлять их на сервер.

Использование ref для формы

Для программного контроля состояния формы используется ref:

<el-form ref="myForm" :model="formData" :rules="rules">
  ...
</el-form>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const formData = ref({ name: '', age: null });
    const myForm = ref(null);
    const rules = {
      name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
      age: [{ type: 'number', required: true, message: 'Введите возраст', trigger: 'change' }]
    };

    const validateForm = () => {
      myForm.value.validate((valid) => {
        if (valid) {
          console.log('Форма валидна', formData.value);
        } else {
          console.log('Ошибка валидации');
          return false;
        }
      });
    };

    return { formData, myForm, rules, validateForm };
  }
};
</script>
  • ref позволяет вызывать методы формы, такие как validate, resetFields, clearValidate.
  • validate выполняет проверку всех полей по заданным правилам.

Слежение за отдельными полями формы

Element Plus поддерживает динамическое наблюдение за изменением отдельных полей через watch или реактивные свойства Vue:

import { watch, reactive } from 'vue';

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

watch(() => formData.name, (newValue, oldValue) => {
  console.log(`Имя изменилось с ${oldValue} на ${newValue}`);
});
  • Позволяет выполнять дополнительные действия при изменении значения, например, включать кнопки, менять доступность других полей или синхронизировать данные с внешними сервисами.

Динамическое управление правилами валидации

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

const rules = reactive({
  email: [
    { required: true, message: 'Введите email', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат', trigger: 'blur' }
  ]
});

watch(() => formData.age, (age) => {
  if (age < 18) {
    rules.email.push({ message: 'Email не требуется для несовершеннолетних', validator: () => true });
  }
});
  • Использование реактивных правил позволяет динамически подстраивать форму под логику приложения.

Синхронизация нескольких форм

Когда в приложении есть несколько связанных форм, можно использовать общий объект состояния:

const globalFormState = reactive({
  personal: { name: '', age: null },
  contact: { email: '', phone: '' }
});

<el-form :model="globalFormState.personal">...</el-form>
<el-form :model="globalFormState.contact">...</el-form>
  • Все формы автоматически обновляют данные в едином источнике, что упрощает обработку и отправку на сервер.
  • Для отдельных действий можно использовать методы validate на каждой форме или объединить их в общий метод.

Интеграция с внешними хранилищами состояния

При использовании Vuex или Pinia данные формы можно синхронизировать с глобальным состоянием:

import { useStore } from 'vuex';

const store = useStore();
const formData = computed({
  get: () => store.state.form,
  set: (value) => store.commit('updateForm', value)
});
  • Это обеспечивает двустороннюю синхронизацию, где изменения в форме обновляют глобальное состояние, а обновления состояния отражаются в форме.

Ключевые методы для синхронизации и контроля формы

Метод Назначение
validate(callback) Проверяет форму и возвращает результат в callback
resetFields() Сбрасывает значения полей к исходным
clearValidate(field) Очищает ошибки валидации, поле необязательно
validateField(prop, cb) Проверяет одно поле формы

Эти методы позволяют полностью контролировать состояние формы и синхронизацию с моделью данных.

Особенности работы с реактивностью

  • Прямое присвоение объектов может сломать реактивность. Лучше использовать методы Vue (reactive, ref, computed) или Object.assign для обновления модели.
  • Глубокая реактивность гарантируется для объектов и массивов внутри reactive, что позволяет синхронизировать формы с вложенными структурами данных.

Пример сложной формы с вложенной структурой

const formData = reactive({
  user: { name: '', age: null },
  address: { city: '', zip: '' }
});

<el-form :model="formData">
  <el-form-item label="Имя">
    <el-input v-model="formData.user.name"></el-input>
  </el-form-item>
  <el-form-item label="Город">
    <el-input v-model="formData.address.city"></el-input>
  </el-form-item>
</el-form>
  • Даже вложенные объекты корректно синхронизируются с формой, все изменения мгновенно отражаются в formData.

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

Оглавление