Form и Form.Item

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

Создание формы

Компонент Form обычно используется как контейнер для полей формы. Его основной синтаксис:

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

const DemoForm = () => {
  const [form] = Form.useForm();

  const onFin ish = (values) => {
    console.log('Received values:', values);
  };

  return (
    <Form
      form={form}
      name="demo_form"
      layout="vertical"
      onFin ish={onFinish}
      initialValues={{ username: '', password: '' }}
    >
      {/* Поля формы будут здесь */}
    </Form>
  );
};

Ключевые свойства Form:

  • form — объект управления формой, создается через Form.useForm(). Позволяет программно управлять значениями и состоянием полей.
  • name — уникальное имя формы.
  • layout — задает расположение полей: horizontal (по умолчанию), vertical или inline.
  • onFinish — коллбек, вызываемый при успешной валидации формы.
  • initialValues — начальные значения полей формы.
  • validateMessages — шаблоны сообщений об ошибках валидации.

Form.Item — основа полей формы

Компонент Form.Item используется для создания отдельных полей и их валидации. Каждый Form.Item связан с уникальным ключом name, который соответствует имени поля в форме.

<Form.Item
  label="Имя пользователя"
  name="username"
  rules={[{ required: true, message: 'Введите имя пользователя' }]}
>
  <Input placeholder="Введите имя пользователя" />
</Form.Item>

<Form.Item
  label="Пароль"
  name="password"
  rules={[
    { required: true, message: 'Введите пароль' },
    { min: 6, message: 'Пароль должен быть не менее 6 символов' }
  ]}
>
  <Input.Password placeholder="Введите пароль" />
</Form.Item>

<Form.Item>
  <Button type="primary" htmlType="submit">
    Войти
  </Button>
</Form.Item>

Основные свойства Form.Item:

  • label — подпись к полю.
  • name — уникальный идентификатор поля, используемый для работы с form.getFieldValue и form.setFieldsValue.
  • rules — массив правил валидации.
  • dependencies — массив других полей, от которых зависит текущее поле (например, для подтверждения пароля).
  • hasFeedback — отображает иконку состояния валидации (успешно/ошибка) после взаимодействия пользователя.

Валидация полей

Ant Design поддерживает встроенную валидацию через правила в Form.Item. Правила задаются как объекты с ключами:

  • required — обязательное поле.
  • min / max / len — проверка длины текста.
  • pattern — регулярное выражение для проверки формата.
  • validator — пользовательская функция проверки.

Пример кастомной валидации:

<Form.Item
  label="Подтверждение пароля"
  name="confirm"
  dependencies={['password']}
  hasFeedback
  rules={[
    { required: true, message: 'Подтвердите пароль' },
    ({ getFieldValue }) => ({
      validator(_, value) {
        if (!value || getFieldValue('password') === value) {
          return Promise.resolve();
        }
        return Promise.reject(new Error('Пароли не совпадают'));
      },
    }),
  ]}
>
  <Input.Password placeholder="Повторите пароль" />
</Form.Item>

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

Форма Ant Design предоставляет методы для программного контроля:

form.setFieldsValue({ username: 'John' }); // установить значения
form.getFieldValue('username'); // получить значение
form.resetFields(); // сброс всех полей к initialValues
form.validateFields(); // запуск валидации

Использование этих методов позволяет динамически изменять содержимое формы, реализовывать интерактивные сценарии и управлять сложными зависимостями между полями.

Layout и стилизация

  • layout=“vertical” — метки располагаются над полями.
  • layout=“horizontal” — метки слева от полей.
  • layout=“inline” — горизонтальная форма с полями в одной строке.

Дополнительно можно управлять шириной и выравниванием полей через свойства labelCol и wrapperCol:

<Form
  labelCol={{ span: 6 }}
  wrapperCol={{ span: 14 }}
>

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

Динамические формы

Ant Design поддерживает динамическое добавление и удаление полей через Form.List:

<Form.List name="users">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <Form.Item
          {...restField}
          name={[name, 'first']}
          rules={[{ required: true, message: 'Введите имя' }]}
        >
          <Input placeholder="Имя" />
        </Form.Item>
      ))}
      <Button onCl ick={() => add()}>Добавить</Button>
    </>
  )}
</Form.List>

Такой подход упрощает создание форм с повторяющимися блоками данных, например, списков участников или адресов.

Интеграция с UI-компонентами

Любой компонент Ant Design можно использовать внутри Form.Item, поддерживая управление состоянием и валидацией:

  • Input
  • Input.Password
  • Select
  • DatePicker
  • Checkbox
  • Radio.Group
  • Switch

Пример с Select:

<Form.Item
  name="role"
  label="Роль"
  rules={[{ required: true, message: 'Выберите роль' }]}
>
  <Select placeholder="Выберите роль">
    <Select.Option value="admin">Администратор</Select.Option>
    <Select.Option value="user">Пользователь</Select.Option>
  </Select>
</Form.Item>

Использование стандартных компонентов Ant Design внутри Form.Item обеспечивает консистентность интерфейса и минимизирует необходимость в кастомной логике валидации.

Эта структура Form + Form.Item формирует основу для любых форм в приложениях на React с использованием Ant Design, обеспечивая мощную систему управления данными, валидацией и стилями.

Оглавление