正文

颠覆传统，Ant 动态表单库：轻松打造个性化表单体验，告别繁琐配置！

/0 浏览量
0319

引言

在数字化时代，表单作为用户交互的重要界面元素，其设计和实现往往决定了用户体验的优劣。Ant Design（简称 Ant）动态表单库应运而生，它旨在简化表单的开发流程，提高开发效率，同时提供灵活的配置选项，以满足不同场景下的个性化需求。本文将详细介绍Ant动态表单库的特性、使用方法以及在实际项目中的应用案例。

Ant 动态表单库概述

1. 特性

  • 组件化设计：Ant动态表单库提供了一系列可复用的表单组件，如输入框、选择框、日期选择器等，方便开发者快速搭建表单。
  • 动态配置：支持通过配置文件或代码动态定义表单字段，无需修改表单结构即可适应不同数据模型。
  • 数据验证：内置强大的数据验证机制，支持自定义验证规则，确保数据准确性。
  • 响应式布局：支持响应式设计，适应不同屏幕尺寸和设备。
  • 易于扩展：支持自定义组件和插件，满足个性化需求。

2. 安装

npm install ant-design-pro-form
# 或者
yarn add ant-design-pro-form

使用方法

1. 基础使用

以下是一个简单的Ant动态表单示例：

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

const Demo = () => {
  return (
    <Form
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

2. 动态配置

以下是一个动态配置表单的示例：

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

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

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      form={form}
      name="dynamic_form_nest_item"
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        name={['fields', 0, 'name']}
        rules={[
          {
            required: true,
            message: '请输入字段名!',
          },
        ]}
      >
        <Input placeholder="字段名" />
      </Form.Item>
      <Form.List name="fields">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField }) => (
              <Form.Item
                key={key}
                {...restField}
                name={[name, 'label']}
                fieldKey={[fieldKey, 'label']}
                rules={[
                  {
                    required: true,
                    message: '请输入标签!',
                  },
                ]}
              >
                <Input placeholder="标签" />
              </Form.Item>
              <Form.Item
                key={key}
                {...restField}
                name={[name, 'value']}
                fieldKey={[fieldKey, 'value']}
                rules={[
                  {
                    required: true,
                    message: '请输入值!',
                  },
                ]}
              >
                <Input placeholder="值" />
              </Form.Item>
              <Form.Item
                key={key}
                {...restField}
                name={[name, 'type']}
                fieldKey={[fieldKey, 'type']}
                rules={[
                  {
                    required: true,
                    message: '请输入类型!',
                  },
                ]}
              >
                <Input placeholder="类型" />
              </Form.Item>
              <Form.Item key={key} {...restField}>
                <Button type="dashed" onClick={() => remove(key)}>
                  删除
                </Button>
              </Form.Item>
            ))}
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="dashed" onClick={() => add()} block>
          添加字段
        </Button>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DynamicForm;

应用案例

以下是一个使用Ant动态表单库实现表单验证的案例：

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

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

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        name="confirm"
        label="确认密码"
        dependencies={['password']}
        hasFeedback
        rules={[
          {
            required: true,
            message: '请再次输入密码!',
          },
          ({ getFieldValue }) => ({
            validator: async (_, value) => {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('两次输入的密码不一致!'));
            },
          }),
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default ValidationForm;

总结

Ant 动态表单库为开发者提供了一个高效、灵活的表单解决方案。通过本文的介绍，相信您已经对Ant动态表单库有了初步的了解。在实际开发中，您可以根据项目需求，灵活运用Ant动态表单库提供的各种功能和特性，打造出个性化的表单体验。

-- 展开阅读全文 --