feat: add form demo
tjz
parent
d959c04a0c
commit
72b9d175ba
|
|
@ -0,0 +1,260 @@
|
|||
<cn>
|
||||
#### 注册新用户
|
||||
用户填写必须的信息以注册新用户。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Registration
|
||||
Fill in this form to create a new account for you.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const residences = [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
}],
|
||||
}],
|
||||
}, {
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
}],
|
||||
}],
|
||||
}]
|
||||
|
||||
const RegistrationForm = {
|
||||
data () {
|
||||
return {
|
||||
confirmDirty: false,
|
||||
autoCompleteResult: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFieldsAndScroll((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleConfirmBlur (e) {
|
||||
const value = e.target.value
|
||||
this.confirmDirty = this.confirmDirty || !!value
|
||||
},
|
||||
compareToFirstPassword (rule, value, callback) {
|
||||
const form = this.form
|
||||
if (value && value !== form.getFieldValue('password')) {
|
||||
callback('Two passwords that you enter is inconsistent!')
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
validateToNextPassword (rule, value, callback) {
|
||||
const form = this.form
|
||||
if (value && this.confirmDirty) {
|
||||
form.validateFields(['confirm'], { force: true })
|
||||
}
|
||||
callback()
|
||||
},
|
||||
handleWebsiteChange (value) {
|
||||
let autoCompleteResult
|
||||
if (!value) {
|
||||
autoCompleteResult = []
|
||||
} else {
|
||||
autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`)
|
||||
}
|
||||
this.autoCompleteResult = autoCompleteResult
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
const { autoCompleteResult } = this
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
}
|
||||
const tailFormItemLayout = {
|
||||
wrapperCol: {
|
||||
xs: {
|
||||
span: 24,
|
||||
offset: 0,
|
||||
},
|
||||
sm: {
|
||||
span: 16,
|
||||
offset: 8,
|
||||
},
|
||||
},
|
||||
}
|
||||
const prefixSelector = getFieldDecorator('prefix', {
|
||||
initialValue: '86',
|
||||
})(
|
||||
<a-select style={{ width: '70px' }}>
|
||||
<a-select-option value='86'>+86</a-select-option>
|
||||
<a-select-option value='87'>+87</a-select-option>
|
||||
</a-select>
|
||||
)
|
||||
|
||||
const websiteOptions = autoCompleteResult.map(website => (
|
||||
<a-select-option key={website}>{website}</a-select-option>
|
||||
))
|
||||
|
||||
return (
|
||||
<a-form onSubmit={this.handleSubmit}>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='E-mail'
|
||||
>
|
||||
{getFieldDecorator('email', {
|
||||
rules: [{
|
||||
type: 'email', message: 'The input is not valid E-mail!',
|
||||
}, {
|
||||
required: true, message: 'Please input your E-mail!',
|
||||
}],
|
||||
})(
|
||||
<a-input />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Password'
|
||||
>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [{
|
||||
required: true, message: 'Please input your password!',
|
||||
}, {
|
||||
validator: this.validateToNextPassword,
|
||||
}],
|
||||
})(
|
||||
<a-input type='password' />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Confirm Password'
|
||||
>
|
||||
{getFieldDecorator('confirm', {
|
||||
rules: [{
|
||||
required: true, message: 'Please confirm your password!',
|
||||
}, {
|
||||
validator: this.compareToFirstPassword,
|
||||
}],
|
||||
})(
|
||||
<a-input type='password' onBlur={this.handleConfirmBlur} />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label={(
|
||||
<span>
|
||||
Nickname
|
||||
<a-tooltip title='What do you want others to call you?'>
|
||||
<a-icon type='question-circle-o' />
|
||||
</a-tooltip>
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
{getFieldDecorator('nickname', {
|
||||
rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
|
||||
})(
|
||||
<a-input />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Habitual Residence'
|
||||
>
|
||||
{getFieldDecorator('residence', {
|
||||
initialValue: ['zhejiang', 'hangzhou', 'xihu'],
|
||||
rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
|
||||
})(
|
||||
<a-cascader options={residences} />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Phone Number'
|
||||
>
|
||||
{getFieldDecorator('phone', {
|
||||
rules: [{ required: true, message: 'Please input your phone number!' }],
|
||||
})(
|
||||
<a-input addonBefore={prefixSelector} style={{ width: '100%' }} />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Website'
|
||||
>
|
||||
{getFieldDecorator('website', {
|
||||
rules: [{ required: true, message: 'Please input website!' }],
|
||||
})(
|
||||
<a-auto-complete
|
||||
dataSource={websiteOptions}
|
||||
onChange={this.handleWebsiteChange}
|
||||
placeholder='website'
|
||||
>
|
||||
<a-input />
|
||||
</a-auto-complete>
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Captcha'
|
||||
extra='We must make sure that your are a human.'
|
||||
>
|
||||
<a-row gutter={8}>
|
||||
<a-col span={12}>
|
||||
{getFieldDecorator('captcha', {
|
||||
rules: [{ required: true, message: 'Please input the captcha you got!' }],
|
||||
})(
|
||||
<a-input />
|
||||
)}
|
||||
</a-col>
|
||||
<a-col span={12}>
|
||||
<a-button>Get captcha</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
<a-form-item {...{ props: tailFormItemLayout }}>
|
||||
{getFieldDecorator('agreement', {
|
||||
valuePropName: 'checked',
|
||||
})(
|
||||
<a-checkbox>I have read the <a href=''>agreement</a></a-checkbox>
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item {...{ props: tailFormItemLayout }}>
|
||||
<a-button type='primary' htmlType='submit'>Register</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(RegistrationForm)
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,67 +1,185 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-form :layout="formLayout">
|
||||
<a-form-item
|
||||
label='Form Layout'
|
||||
:labelCol="formItemLayout.labelCol"
|
||||
:wrapperCol="formItemLayout.wrapperCol"
|
||||
>
|
||||
<a-radio-group defaultValue='horizontal' @change="handleFormLayoutChange">
|
||||
<a-radio-button value='horizontal'>Horizontal</a-radio-button>
|
||||
<a-radio-button value='vertical'>Vertical</a-radio-button>
|
||||
<a-radio-button value='inline'>Inline</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label='Field A'
|
||||
:labelCol="formItemLayout.labelCol"
|
||||
:wrapperCol="formItemLayout.wrapperCol"
|
||||
>
|
||||
<a-input placeholder='input placeholder' />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label='Field B'
|
||||
:labelCol="formItemLayout.labelCol"
|
||||
:wrapperCol="formItemLayout.wrapperCol"
|
||||
>
|
||||
<a-input placeholder='input placeholder' />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:wrapperCol="buttonItemLayout.wrapperCol"
|
||||
>
|
||||
<a-button type='primary'>Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
formLayout: 'horizontal',
|
||||
}
|
||||
},
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const Demo = {
|
||||
methods: {
|
||||
handleFormLayoutChange (e) {
|
||||
this.formLayout = e.target.value
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
normFile (e) {
|
||||
console.log('Upload event:', e)
|
||||
if (Array.isArray(e)) {
|
||||
return e
|
||||
}
|
||||
return e && e.fileList
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
formItemLayout () {
|
||||
const { formLayout } = this
|
||||
return formLayout === 'horizontal' ? {
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 14 },
|
||||
} : {}
|
||||
},
|
||||
buttonItemLayout () {
|
||||
const { formLayout } = this
|
||||
return formLayout === 'horizontal' ? {
|
||||
wrapperCol: { span: 14, offset: 4 },
|
||||
} : {}
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
}
|
||||
return (
|
||||
<a-form onSubmit={this.handleSubmit}>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Plain Text'
|
||||
>
|
||||
<span class='ant-form-text'>China</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select'
|
||||
hasFeedback
|
||||
>
|
||||
{getFieldDecorator('select', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your country!' },
|
||||
],
|
||||
})(
|
||||
<a-select placeholder='Please select a country'>
|
||||
<a-select-option value='china'>China</a-select-option>
|
||||
<a-select-option value='use'>U.S.A</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select[multiple]'
|
||||
>
|
||||
{getFieldDecorator('select-multiple', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
|
||||
],
|
||||
})(
|
||||
<a-select mode='multiple' placeholder='Please select favourite colors'>
|
||||
<a-select-option value='red'>Red</a-select-option>
|
||||
<a-select-option value='green'>Green</a-select-option>
|
||||
<a-select-option value='blue'>Blue</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='InputNumber'
|
||||
>
|
||||
{getFieldDecorator('input-number', { initialValue: 3 })(
|
||||
<a-input-number min={1} max={10} />
|
||||
)}
|
||||
<span class='ant-form-text'> machines</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Switch'
|
||||
>
|
||||
{getFieldDecorator('switch', { valuePropName: 'checked' })(
|
||||
<a-switch />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Slider'
|
||||
>
|
||||
{getFieldDecorator('slider')(
|
||||
<a-slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Group'
|
||||
>
|
||||
{getFieldDecorator('radio-group')(
|
||||
<a-radio-group>
|
||||
<a-radio value='a'>item 1</a-radio>
|
||||
<a-radio value='b'>item 2</a-radio>
|
||||
<a-radio value='c'>item 3</a-radio>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Button'
|
||||
>
|
||||
{getFieldDecorator('radio-button')(
|
||||
<a-radio-group>
|
||||
<a-radio-button value='a'>item 1</a-radio-button>
|
||||
<a-radio-button value='b'>item 2</a-radio-button>
|
||||
<a-radio-button value='c'>item 3</a-radio-button>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Rate'
|
||||
>
|
||||
{getFieldDecorator('rate', {
|
||||
initialValue: 3.5,
|
||||
})(
|
||||
<a-rate allowHalf/>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Upload'
|
||||
extra='longgggggggggggggggggggggggggggggggggg'
|
||||
>
|
||||
{getFieldDecorator('upload', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload name='logo' action='/upload.do' listType='picture'>
|
||||
<a-button>
|
||||
<a-icon type='upload' /> Click to upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Dragger'
|
||||
>
|
||||
<div class='dropbox'>
|
||||
{getFieldDecorator('dragger', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload-dragger name='files' action='/upload.do'>
|
||||
<p class='ant-upload-drag-icon'>
|
||||
<a-icon type='inbox' />
|
||||
</p>
|
||||
<p class='ant-upload-text'>Click or drag file to this area to upload</p>
|
||||
<p class='ant-upload-hint'>Support for a single or bulk upload.</p>
|
||||
</a-upload-dragger>
|
||||
)}
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
wrapperCol={{ span: 12, offset: 6 }}
|
||||
>
|
||||
<a-button type='primary' htmlType='submit'>Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(Demo)
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
<cn>
|
||||
#### 时间类控件
|
||||
时间类组件的 `value` 为 `moment` 类型，所以在提交前需要预处理。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Time-related Controls
|
||||
the `value` of time-related components is `moment`. So, we need to pre-process those values.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const TimeRelatedForm = {
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
|
||||
this.form.validateFields((err, fieldsValue) => {
|
||||
if (err) {
|
||||
return
|
||||
}
|
||||
|
||||
// Should format date value before submit.
|
||||
const rangeValue = fieldsValue['range-picker']
|
||||
const rangeTimeValue = fieldsValue['range-time-picker']
|
||||
const values = {
|
||||
...fieldsValue,
|
||||
'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
|
||||
'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
|
||||
'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
|
||||
'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
|
||||
'range-time-picker': [
|
||||
rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
|
||||
rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
|
||||
}
|
||||
console.log('Received values of form: ', values)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 8 },
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 },
|
||||
},
|
||||
}
|
||||
const config = {
|
||||
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
|
||||
}
|
||||
const rangeConfig = {
|
||||
rules: [{ type: 'array', required: true, message: 'Please select time!' }],
|
||||
}
|
||||
return (
|
||||
<a-form onSubmit={this.handleSubmit}>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='DatePicker'
|
||||
>
|
||||
{getFieldDecorator('date-picker', config)(
|
||||
<a-date-picker />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='DatePicker[showTime]'
|
||||
>
|
||||
{getFieldDecorator('date-time-picker', config)(
|
||||
<a-date-picker showTime format='YYYY-MM-DD HH:mm:ss' />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='MonthPicker'
|
||||
>
|
||||
{getFieldDecorator('month-picker', config)(
|
||||
<a-monthPicker />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='RangePicker'
|
||||
>
|
||||
{getFieldDecorator('range-picker', rangeConfig)(
|
||||
<a-range-picker />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='RangePicker[showTime]'
|
||||
>
|
||||
{getFieldDecorator('range-time-picker', rangeConfig)(
|
||||
<a-range-picker showTime format='YYYY-MM-DD HH:mm:ss' />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='TimePicker'
|
||||
>
|
||||
{getFieldDecorator('time-picker', config)(
|
||||
<a-time-picker />
|
||||
)}
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
wrapperCol={{
|
||||
xs: { span: 24, offset: 0 },
|
||||
sm: { span: 16, offset: 8 },
|
||||
}}
|
||||
>
|
||||
<a-button type='primary' htmlType='submit'>Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(TimeRelatedForm)
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<cn>
|
||||
#### 校验其他组件
|
||||
以上演示没有出现的表单控件对应的校验演示。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Other Form Controls
|
||||
Demostration for validataion configuration for form controls which are not show in the above demos.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { Form } from 'vue-antd-ui'
|
||||
|
||||
const Demo = {
|
||||
methods: {
|
||||
handleSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
console.log('Received values of form: ', values)
|
||||
}
|
||||
})
|
||||
},
|
||||
normFile (e) {
|
||||
console.log('Upload event:', e)
|
||||
if (Array.isArray(e)) {
|
||||
return e
|
||||
}
|
||||
return e && e.fileList
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldDecorator } = this.form
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
}
|
||||
return (
|
||||
<a-form id="components-form-demo-validate-other" onSubmit={this.handleSubmit}>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Plain Text'
|
||||
>
|
||||
<span class='ant-form-text'>China</span>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select'
|
||||
hasFeedback
|
||||
>
|
||||
{getFieldDecorator('select', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your country!' },
|
||||
],
|
||||
})(
|
||||
<a-select placeholder='Please select a country'>
|
||||
<a-select-option value='china'>China</a-select-option>
|
||||
<a-select-option value='use'>U.S.A</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Select[multiple]'
|
||||
>
|
||||
{getFieldDecorator('select-multiple', {
|
||||
rules: [
|
||||
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
|
||||
],
|
||||
})(
|
||||
<a-select mode='multiple' placeholder='Please select favourite colors'>
|
||||
<a-select-option value='red'>Red</a-select-option>
|
||||
<a-select-option value='green'>Green</a-select-option>
|
||||
<a-select-option value='blue'>Blue</a-select-option>
|
||||
</a-select>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='InputNumber'
|
||||
>
|
||||
{getFieldDecorator('input-number', { initialValue: 3 })(
|
||||
<a-input-number min={1} max={10} />
|
||||
)}
|
||||
<span class='ant-form-text'> machines</span>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Switch'
|
||||
>
|
||||
{getFieldDecorator('switch', { valuePropName: 'checked' })(
|
||||
<a-switch />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Slider'
|
||||
>
|
||||
{getFieldDecorator('slider')(
|
||||
<a-slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Group'
|
||||
>
|
||||
{getFieldDecorator('radio-group')(
|
||||
<a-radio-group>
|
||||
<a-radio value='a'>item 1</a-radio>
|
||||
<a-radio value='b'>item 2</a-radio>
|
||||
<a-radio value='c'>item 3</a-radio>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Radio.Button'
|
||||
>
|
||||
{getFieldDecorator('radio-button')(
|
||||
<a-radio-group>
|
||||
<a-radio-button value='a'>item 1</a-radio-button>
|
||||
<a-radio-button value='b'>item 2</a-radio-button>
|
||||
<a-radio-button value='c'>item 3</a-radio-button>
|
||||
</a-radio-group>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Rate'
|
||||
>
|
||||
{getFieldDecorator('rate', {
|
||||
initialValue: 3.5,
|
||||
})(
|
||||
<a-rate allowHalf/>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Upload'
|
||||
extra='longgggggggggggggggggggggggggggggggggg'
|
||||
>
|
||||
{getFieldDecorator('upload', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload name='logo' action='/upload.do' listType='picture'>
|
||||
<a-button>
|
||||
<a-icon type='upload' /> Click to upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
)}
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
{...{ props: formItemLayout }}
|
||||
label='Dragger'
|
||||
>
|
||||
<div class='dropbox'>
|
||||
{getFieldDecorator('dragger', {
|
||||
valuePropName: 'fileList',
|
||||
getValueFromEvent: this.normFile,
|
||||
})(
|
||||
<a-upload-dragger name='files' action='/upload.do'>
|
||||
<p class='ant-upload-drag-icon'>
|
||||
<a-icon type='inbox' />
|
||||
</p>
|
||||
<p class='ant-upload-text'>Click or drag file to this area to upload</p>
|
||||
<p class='ant-upload-hint'>Support for a single or bulk upload.</p>
|
||||
</a-upload-dragger>
|
||||
)}
|
||||
</div>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
wrapperCol={{ span: 12, offset: 6 }}
|
||||
>
|
||||
<a-button type='primary' htmlType='submit'>Submit</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export default Form.create()(Demo)
|
||||
</script>
|
||||
<style>
|
||||
#components-form-demo-validate-other .dropbox {
|
||||
height: 180px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue