README
antd-easy-form
Easy Form based on Ant Design
Usage
import React, { useState } from 'react'
import { Form, FormItemType } from '@antd-easy-form'
const registerFormItems = [
{
name: 'username',
itemType: FormItemType.INPUT,
labelText: '用户名',
required: true,
re: /^[A-Za-z\d]{4,20}$/
},
{
name: 'password',
itemType: FormItemType.PASSWORD,
labelText: '密码',
defaultValue: '',
required: true,
re: /^[A-Za-z\d_,.?/!@#$%^&*()-=+~|\\]{4,20}$/,
},
{
name: 'password2',
itemType: FormItemType.PASSWORD,
labelText: '再次输入',
placeholder: '请再次输入密码',
defaultValue: '',
required: true,
re: /^[A-Za-z\d_,.?/!@#$%^&*()-=+~|\\]{4,20}$/,
},
{
name: 'gender',
itemType: FormItemType.RADIO,
labelText: '性别',
options: [
{
value: 1,
text: '男'
},
{
value: 0,
text: '女'
},
],
buttonStyle: 'solid'
},
{
name: 'fruits',
itemType: FormItemType.CHECKBOX,
labelText: '喜爱的水果',
options: [
{
value: 'apple',
text: '苹果'
},
{
value: 'orange',
text: '橙子'
},
{
value: 'banana',
text: '香蕉'
},
{
value: 'grape',
text: '葡萄'
},
]
},
{
name: 'memo',
itemType: FormItemType.TEXTAREA,
labelText: '个性签名',
defaultValue: '这个人很懒,什么也没留下'
},
{
name: 'city',
itemType: FormItemType.SELECT,
labelText: '城市',
options: [
{
value: '上海',
text: '上海',
},
{
value: '北京',
text: '北京',
}
]
},
{
name: 'salay',
itemType: FormItemType.NUMBER,
labelText: '收入水平',
unit: '万元',
min: 1,
max: 100,
defaultValue: 10
},
]
export default function App (props) {
return (
<div style={{ width: 600, margin: '20px auto' }}>
<Form
items={registerFormItems}
labelAlign={'left'}
labelWidth={120}
onSubmit={console.log}
/>
</div>
)
}
FormItem Reference
TODOs
- Custom Form Item