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，體驗一種從未如此簡單的開發方式。