ant-design-vue/components/vc-form/demo/overview.js

260 lines
5.9 KiB
JavaScript
Raw Normal View History

2018-05-04 08:02:31 +00:00
/* eslint react/no-multi-comp:0, no-console:0 */
import createDOMForm from '../src/createDOMForm'
2018-05-15 01:52:44 +00:00
import { DatePicker, Select } from 'vue-antd-ui'
2018-05-04 08:02:31 +00:00
import { regionStyle, errorStyle } from './styles'
const { Option } = Select
const Email = {
props: {
form: Object,
},
render () {
const { getFieldProps, getFieldError, isFieldValidating } = this.form
const errors = getFieldError('email')
return (<div style={ regionStyle }>
<div>email sync validate</div>
<div>
<input {...getFieldProps('email', {
initialValue: '',
rules: [
{
type: 'email',
message: <b key='err'>错误的 email 格式</b>,
},
],
})}
/></div>
<div style={errorStyle}>
{errors}
</div>
<div style={errorStyle}>
{isFieldValidating('email') ? 'validating' : null}
</div>
</div>)
},
}
const User = {
props: {
form: Object,
},
methods: {
userExists (rule, value, callback) {
setTimeout(() => {
if (value === '1') {
callback([new Error('are you kidding?')])
} else if (value === 'yiminghe') {
callback([new Error('forbid yiminghe')])
} else {
callback()
}
}, 300)
},
},
render () {
const { getFieldProps, getFieldError, isFieldValidating } = this.form
const errors = getFieldError('user')
return (<div style={ regionStyle }>
<div><span style={{ color: 'red' }}>*</span> user async validate</div>
<div>
<input {...getFieldProps('user', {
initialValue: '',
validateFirst: true,
rules: [
{
required: true,
},
{
validator: this.userExists,
},
],
})}
/></div>
<div style={errorStyle}>
{(errors) ? errors.join(',') : null}
</div>
<div style={errorStyle}>
{isFieldValidating('user') ? 'validating' : null}
</div>
</div>)
},
}
const CustomInput = {
props: {
form: Object,
},
render () {
const { getFieldProps, getFieldError, isFieldValidating } = this.form
const errors = getFieldError('select')
return (<div style={ regionStyle }>
<div><span style={{ color: 'red' }}>*</span> custom select sync validate</div>
<div><Select
placeholder='please select'
style={{ width: '200px' }}
{...getFieldProps('select', {
rules: [
{
required: true,
},
],
})}
>
<Option value='1'>1</Option>
<Option value='2'>2</Option>
</Select></div>
<div style={errorStyle}>
{(errors) ? errors.join(',') : null}
</div>
<div style={errorStyle}>
{isFieldValidating('select') ? 'validating' : null}
</div>
</div>)
},
}
const DateInput = {
props: {
form: Object,
},
render () {
const { getFieldProps, getFieldError } = this.form
const errors = getFieldError('date')
return (<div style={ regionStyle }>
<div><span style={{ color: 'red' }}>*</span> DateInput sync validate</div>
<div style={{ width: '200px' }}>
<DatePicker
placeholder='please select'
{...getFieldProps('date', {
rules: [
{
required: true,
type: 'object',
},
],
})}
/>
</div>
<div style={errorStyle}>
{(errors) ? errors.join(',') : null}
</div>
</div>)
},
}
function toNumber (v) {
if (v === undefined) {
return v
}
if (v === '') {
return undefined
}
if (v && v.trim() === '') {
return NaN
}
return Number(v)
}
const NumberInput = {
props: {
form: Object,
},
render () {
const { getFieldProps, getFieldError } = this.form
const errors = getFieldError('number')
return (<div style={ regionStyle }>
<div>number input</div>
<div>
<input
{...getFieldProps('number', {
initialValue: '1',
rules: [{
transform: toNumber,
type: 'number',
}],
})}
/>
</div>
<div style={errorStyle}>
{(errors) ? errors.join(',') : null}
</div>
</div>)
},
}
const Form = {
methods: {
onSubmit (e) {
console.log('submit')
e.preventDefault()
this.form.validateFieldsAndScroll({ scroll: { offsetTop: 20 }}, (error, values) => {
if (!error) {
console.log('ok', values)
} else {
console.log('error', error, values)
}
})
},
reset (e) {
e.preventDefault()
this.form.resetFields()
},
},
render () {
const { form } = this
const { getFieldProps, getFieldError } = form
return (<div style={{ margin: '20px' }}>
<h2>overview</h2>
<form onSubmit={this.onSubmit}>
<User form={ form } saveRef={this.saveRef}/>
<NumberInput form={ form }/>
<Email form={ form }/>
<CustomInput form={ form }/>
<DateInput form={ form }/>
<div style={ regionStyle }>
<div>normal required input</div>
<div>
<input
{...getFieldProps('normal', {
initialValue: '',
rules: [{
required: true,
}],
})}
/>
</div>
<div style={errorStyle}>
{(getFieldError('normal')) ? getFieldError('normal').join(',') : null}
</div>
</div>
<div style={ regionStyle }>
<button onClick={this.reset}>reset</button>
&nbsp;
<input type='submit' value='submit'/>
</div>
</form>
</div>)
},
}
export default createDOMForm({
validateMessages: {
required (field) {
return `${field} 必填`
},
},
})(Form)