Сброс и предзаполнение форм

В библиотеке Ant Design работа с формами осуществляется через компонент Form, который предоставляет гибкий и мощный API для управления состоянием полей, валидацией и обработкой данных. Одними из наиболее востребованных операций являются сброс формы и предзаполнение полей. Рассмотрим их детально.

Управление состоянием формы

Каждая форма в Ant Design может быть связана с объектом Form instance, создаваемым с помощью хука Form.useForm():

import { Form, Input, Button } from 'antd';

const [form] = Form.useForm();

form позволяет выполнять ключевые операции:

  • form.resetFields() – сброс всех полей к их исходным значениям.
  • form.setFieldsValue({}) – установка конкретных значений для полей.
  • form.getFieldsValue() – получение текущих значений всех полей.
  • form.validateFields() – запуск валидации и получение значений.

Эти методы делают формы Ant Design управляемыми, позволяя гибко менять содержимое полей.

Сброс формы

Сброс формы используется для очистки данных или возврата к исходным значениям. Метод resetFields() может быть применён как ко всем полям, так и к выбранным.

const handleReset = () => {
  form.resetFields();
};

Если форма была предзаполнена через initialValues, resetFields() вернёт поля к этим значениям:

<Form form={form} initialValues={{ username: 'user123', age: 25 }}>
  <Form.Item name="username" label="Имя">
    <Input />
  </Form.Item>
  <Form.Item name="age" label="Возраст">
    <Input type="number" />
  </Form.Item>
  <Button onCl ick={handleReset}>Сбросить</Button>
</Form>

При нажатии на кнопку значения полей вернутся к ‘user123’ и 25.

Предзаполнение формы

Предзаполнение используется для отображения уже существующих данных, например при редактировании пользователя. Для этого можно использовать два подхода:

1. Через initialValues

initialValues задаёт начальные значения полей при монтировании формы:

<Form form={form} initialValues={{ email: 'example@mail.com' }}>
  <Form.Item name="email" label="Email">
    <Input />
  </Form.Item>
</Form>

Важно: initialValues работает только при первом рендере формы. Если значения меняются после монтирования, они не обновятся автоматически. Для динамического предзаполнения нужно использовать form.setFieldsValue.

2. Через setFieldsValue

setFieldsValue позволяет программно установить значения в любое время:

const userData = { username: 'john_doe', age: 30 };

form.setFieldsValue({
  username: userData.username,
  age: userData.age,
});

Это особенно удобно при асинхронной загрузке данных с сервера:

useEffect(() => {
  fetchUserData().then(data => {
    form.setFieldsValue({
      username: data.username,
      email: data.email,
    });
  });
}, []);

Комбинирование сброса и предзаполнения

Иногда требуется вернуть форму к определённым значениям после редактирования. Например:

const defaultValues = { username: 'guest', age: 20 };

const handleResetToDefault = () => {
  form.resetFields(); // возвращает к initialValues
  form.setFieldsValue(defaultValues); // устанавливает кастомные значения
};

Таким образом можно комбинировать сброс к исходным значениям и предзаполнение новыми данными.

Работа с отдельными полями

Методы resetFields и setFieldsValue поддерживают работу с конкретными полями:

// Сброс только поля username
form.resetFields(['username']);

// Изменение только одного поля
form.setFieldsValue({ age: 35 });

Это позволяет гибко управлять формой, не затрагивая остальные поля.

Валидация при предзаполнении

При программной установке значений через setFieldsValue можно автоматически инициировать валидацию:

form.setFieldsValue({ email: 'invalid-email' });
form.validateFields(['email']).catch(errors => {
  console.log('Ошибка валидации:', errors);
});

Это предотвращает отправку некорректных данных при редактировании.

Полезные советы

  • Для форм с динамическим контентом лучше использовать setFieldsValue, а не initialValues.
  • resetFields() всегда возвращает поля к initialValues, если они заданы. Если нужно очистить полностью, можно установить пустой объект через setFieldsValue({}).
  • Комбинация resetFields и setFieldsValue позволяет создавать кнопки “Сбросить к дефолтным значениям” или “Очистить поля” с полной гибкостью.

Использование этих методов обеспечивает полный контроль над состоянием форм в Ant Design и позволяет создавать формы с динамическим содержимым, предзаполнением и удобным сбросом данных, соответствующими современным требованиям интерфейсов.

Оглавление