Ant Plus，Ant Design Form 从未如此简单

简介

Ant Plus 是 Ant Design Form 的加强版，在其基础上，封装了极其简便的 Form 使用方式与 Form 相关组件的简化 API。

文档

nanxiaobei.github.io/ant-plus

特色

• 极其简便：告别繁琐的 form.getFieldDecorator 样板代码与冗长的 rules 校验代码。
• 渐进加强：若不使用新的功能，彻底能够把组件看成 Ant Design 中的组件来使用。
• 统一提示：可全局定义 rules 校验提示信息，统一体验，告别烦乱的自定义与不可控。
• 简化 API：对 Form 相关组件的经常使用 API 进行了简化，一切只为更流畅的开发。

安装

Yarn

yarn add antx
复制代码

npm

npm install antx
复制代码

使用

示例：codesandbox.io/s/mqxxzrj87…

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

const Demo = ({ form }) => (
  <Form api={form} data={{ username: 'Emily' }}> <Input label="用户名" id="username" rules={['required', 'string', 'max=10']} max={10} msg="full" /> <Button htmlType="submit">提交</Button> </Form> ); export default Form.create()(Demo); 复制代码

表单控件的 Props 中，id 为表单域惟一标识，label 为 Form.Item 的 label。getFieldDecorator(id, options) options 参数中的项，都可直接用于组件的 Props，如 rules、initialValue 等。

Ant Plus 还对 rules 作了优化，可以使用简洁的字符串，来设置校验规则。同时提供了体验更好的校验提示 UI。

是的，一切就是如此的简洁清晰。完整使用介绍，请查阅 Ant Plus Form 组件文档。

对比

使用 Ant Plus 与使用传统 Ant Design 搭建 Form 的代码对比。

连接

GitHub: github.com/nanxiaobei/…

npm: www.npmjs.com/package/ant…

最后

欢迎尝试，欢迎 Star，体验一种从未如此简单的开发方式。