121 lines
2.6 KiB
JavaScript
121 lines
2.6 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index'
|
|
import { Select } from 'vue-antd-ui'
|
|
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)
|
|
|