antd-form-builder 使用教程

antd-form-builder 使用教程

项目介绍

antd-form-builder 是一个基于 ant-design 和 react-hook-form 构建的表单生成库。它可以根据提供的有效 JSON 模式生成一个 ant 设计表单。这个库简化了表单的创建过程，使得开发者可以更专注于业务逻辑而非表单的布局和验证。

项目快速启动

安装

首先，你需要安装 antd-form-builder：

npm install antd-form-builder

或者使用 yarn：

yarn add antd-form-builder

基本使用

以下是一个简单的示例，展示如何使用 antd-form-builder 创建一个表单：

import React from 'react';
import FormBuilder from 'antd-form-builder';

const App = () => {
  const formSchema = [
    {
      type: 'text',
      name: 'firstName',
      defaultValue: 'Simon',
      required: true,
      placeholder: 'First name',
      label: 'First name',
      fieldProps: {
        disabled: false
      },
      validation: {
        required: true,
        errorMessage: 'Please make sure your input is correct',
        validate: value => value.toString().startsWith('A')
      }
    },
    {
      type: 'number',
      name: 'age',
      required: true,
      defaultValue: 21,
      placeholder: 'Age',
      label: 'Age',
      fieldProps: {
        disabled: false,
        style: { width: 300 }
      },
      validation: {
        required: true,
        errorMessage: 'Please make sure your input is correct'
      }
    }
  ];

  const handleSubmit = data => {
    console.log(data);
  };

  return (
    <FormBuilder
      formSchema={formSchema}
      onSubmit={handleSubmit}
      renderFooter={handleSubmit => (
        <button className="button" onClick={handleSubmit}>
          Submit
        </button>
      )}
    />
  );
};

export default App;

应用案例和最佳实践

动态表单生成

在某些场景下，你可能需要根据用户的输入动态生成表单。antd-form-builder 支持这种动态表单生成，你可以根据用户的输入动态调整 formSchema。

const DynamicForm = () => {
  const [formSchema, setFormSchema] = React.useState([
    {
      type: 'text',
      name: 'firstName',
      required: true,
      placeholder: 'First name',
      label: 'First name'
    }
  ]);

  const handleAddField = () => {
    setFormSchema([
      ...formSchema,
      {
        type: 'text',
        name: `dynamicField-${formSchema.length}`,
        required: true,
        placeholder: 'Dynamic Field',
        label: 'Dynamic Field'
      }
    ]);
  };

  return (
    <div>
      <FormBuilder formSchema={formSchema} onSubmit={console.log} />
      <button onClick={handleAddField}>Add Field</button>
    </div>
  );
};

表单验证

antd-form-builder 提供了强大的表单验证功能。你可以通过 validation 属性定义各种验证规则。

const ValidationForm = () => {
  const formSchema = [
    {
      type: 'email',
      name: 'email',
      required: true,
      placeholder: 'Email',
      label: 'Email',
      validation: {
        required: true,
        pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        errorMessage: 'Please enter a valid email address'
      }
    }
  ];

  return <FormBuilder formSchema={formSchema} onSubmit={console.log} />;
};

典型生态项目

antd-form-builder 可以与许多其他项目和库结合使用，以增强其功能。以下是一些典型的生态项目：

1. **ant-design