feat: add vc-form demo
tangjinzhou
parent
0658674d3f
commit
824666852d
|
|
@ -0,0 +1,85 @@
|
|||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import { createForm } from '../index'
|
||||
import { regionStyle } from './styles'
|
||||
import { Switch } from 'antd'
|
||||
|
||||
const TopForm = {
|
||||
props: {
|
||||
form: Object,
|
||||
},
|
||||
render () {
|
||||
const { getFieldProps } = this.form
|
||||
return (<div style={ regionStyle }>
|
||||
<div>has email? </div>
|
||||
<div>
|
||||
<Switch {...getFieldProps('on', {
|
||||
initialValue: true,
|
||||
valuePropName: 'checked',
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
const BottomForm = {
|
||||
props: {
|
||||
form: Object,
|
||||
on: Boolean,
|
||||
},
|
||||
render () {
|
||||
const { form } = this
|
||||
const on = form.getFieldValue('on')
|
||||
const style = {
|
||||
...regionStyle,
|
||||
display: on ? 'block' : 'none',
|
||||
}
|
||||
return (<div style={ style }>
|
||||
<div>email: </div>
|
||||
<div>
|
||||
<input {...form.getFieldProps('email', {
|
||||
rules: [{
|
||||
type: 'email',
|
||||
}],
|
||||
hidden: !on,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
const Form = {
|
||||
props: {
|
||||
form: Object,
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
e.preventDefault()
|
||||
console.log(this.form.getFieldsValue())
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
return (<div>
|
||||
<TopForm form={ form }/>
|
||||
<BottomForm form={ form }/>
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.onSubmit}>submit</button>
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
const NewForm = createForm()(Form)
|
||||
|
||||
export default {
|
||||
render () {
|
||||
return (<div>
|
||||
<h2>parallel form</h2>
|
||||
<NewForm />
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
/* eslint no-console:0 */
|
||||
|
||||
import { DatePicker } from 'antd'
|
||||
import createDOMForm from '../src/createDOMForm'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
|
||||
const Form = {
|
||||
props: {
|
||||
form: Object,
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
console.log('submit')
|
||||
e.preventDefault()
|
||||
this.form.validateFieldsAndScroll((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
reset (e) {
|
||||
e.preventDefault()
|
||||
this.form.resetFields()
|
||||
},
|
||||
|
||||
checkStart (rule, value, callback) {
|
||||
const { validateFields } = this.form
|
||||
validateFields(['end'], {
|
||||
force: true,
|
||||
})
|
||||
callback()
|
||||
},
|
||||
|
||||
checkEnd (rule, value, callback) {
|
||||
const end = value
|
||||
const { getFieldValue } = this.form
|
||||
const start = getFieldValue('start')
|
||||
if (!end || !start) {
|
||||
callback('please select both start and end time')
|
||||
} else if (end.valueOf() < start.valueOf()) {
|
||||
callback('start time should be less than end time')
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
const { getFieldProps, getFieldError } = form
|
||||
return (<div style={{ margin: 20 }}>
|
||||
<h2>startTime and endTime validation</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<div style={ regionStyle }>
|
||||
<div>start: </div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('start', {
|
||||
rules: [this.checkStart],
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<div>end: </div>
|
||||
<div>
|
||||
<DatePicker {...getFieldProps('end', {
|
||||
rules: [this.checkEnd],
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={errorStyle}>
|
||||
{getFieldError('end') ? getFieldError('end').join(',') : ''}
|
||||
</div>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
export default createDOMForm()(Form)
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import { createForm } from '../index'
|
||||
import { Select } from 'antd'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
import { mergeProps } from '../../_util/props-util'
|
||||
const emailTpl = ['@gmail.com', '@outlook.com', '@qq.com']
|
||||
const { Option } = Select
|
||||
const CustomInput = {
|
||||
props: {
|
||||
form: Object,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (v) {
|
||||
if (v.indexOf('@') === -1) {
|
||||
this.data = emailTpl.map(m => v + m)
|
||||
} else if (this.data.length) {
|
||||
this.data = []
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
||||
const errors = getFieldError('select')
|
||||
return (<div style={ regionStyle }>
|
||||
<div>custom select sync validate</div>
|
||||
<div>
|
||||
<Select
|
||||
{
|
||||
...mergeProps(
|
||||
{
|
||||
props: {
|
||||
placeholder: 'please select',
|
||||
mode: 'combobox',
|
||||
filterOption: false,
|
||||
},
|
||||
style: {
|
||||
width: '200px',
|
||||
},
|
||||
}, getFieldProps('select', {
|
||||
change: this.onChange,
|
||||
rules: [
|
||||
{
|
||||
type: 'email',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
}))
|
||||
}
|
||||
>
|
||||
{this.data.map((d) => {
|
||||
return <Option key={d} value={d}>{d}</Option>
|
||||
})}
|
||||
</Select>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',')
|
||||
: <b
|
||||
style={{
|
||||
visibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</b>}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('select') ? 'validating' : <b
|
||||
style={{
|
||||
visibility: 'hidden',
|
||||
}}
|
||||
>
|
||||
1
|
||||
</b>}
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
const Form = {
|
||||
props: {
|
||||
form: Object,
|
||||
},
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
e.preventDefault()
|
||||
this.form.validateFields((error, values) => {
|
||||
if (!error) {
|
||||
console.log('ok', values)
|
||||
} else {
|
||||
console.log('error', error, values)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
render () {
|
||||
const { form } = this
|
||||
return (<div style={{ margin: '20px' }}>
|
||||
<h2>suggest</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<CustomInput form={ form }/>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button>submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
export default createForm()(Form)
|
||||
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
/* eslint react/no-multi-comp:0, no-console:0 */
|
||||
|
||||
import { createForm } from '../index'
|
||||
import { regionStyle, errorStyle } from './styles'
|
||||
|
||||
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: '',
|
||||
validateFirst: true,
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
type: 'email',
|
||||
message: '错误的 email 格式',
|
||||
},
|
||||
],
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{errors ? errors.join(',') : null}
|
||||
</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>user async validate</div>
|
||||
<div>
|
||||
<input {...getFieldProps('user', {
|
||||
initialValue: '',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
},
|
||||
{
|
||||
validator: this.userExists,
|
||||
},
|
||||
],
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{(errors) ? errors.join(',') : null}
|
||||
</div>
|
||||
<div style={errorStyle}>
|
||||
{isFieldValidating('user') ? 'validating' : null}
|
||||
</div>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
const Form = {
|
||||
methods: {
|
||||
onSubmit (e) {
|
||||
console.log('submit')
|
||||
e.preventDefault()
|
||||
this.form.validateFields({
|
||||
// firstFields: false,
|
||||
}, (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
|
||||
return (<div style={{ margin: '20px' }}>
|
||||
<h2>validateFirst</h2>
|
||||
<form onSubmit={this.onSubmit}>
|
||||
<User form={ form }/>
|
||||
|
||||
<Email form={ form }/>
|
||||
|
||||
<div style={ regionStyle }>
|
||||
<button onClick={this.reset}>reset</button>
|
||||
|
||||
<input type='submit' value='submit'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>)
|
||||
},
|
||||
}
|
||||
|
||||
export default createForm()(Form)
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ function createBaseForm (option = {}, mixins = []) {
|
|||
const valuesAllSet = {}
|
||||
valuesAll[name] = value
|
||||
Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]))
|
||||
onValuesChange(this.$props, set({}, name, value), valuesAllSet)
|
||||
onValuesChange(this, set({}, name, value), valuesAllSet)
|
||||
}
|
||||
const field = this.fieldsStore.getField(name)
|
||||
return ({ name, field: { ...field, value, touched: true }, fieldMeta })
|
||||
|
|
@ -300,7 +300,7 @@ function createBaseForm (option = {}, mixins = []) {
|
|||
if (onFieldsChange) {
|
||||
const changedFields = Object.keys(fields)
|
||||
.reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {})
|
||||
onFieldsChange(this.$props, changedFields, this.fieldsStore.getNestedAllFields())
|
||||
onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields())
|
||||
}
|
||||
this.$forceUpdate()
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -344,7 +344,7 @@ function createBaseForm (option = {}, mixins = []) {
|
|||
this.setFields(newFields, callback)
|
||||
if (onValuesChange) {
|
||||
const allValues = this.fieldsStore.getAllValues()
|
||||
onValuesChange(this.$props, changedValues, allValues)
|
||||
onValuesChange(this, changedValues, allValues)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue