124 lines
2.8 KiB
JavaScript
124 lines
2.8 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index'
|
|
import { regionStyle, errorStyle } from './styles'
|
|
import BaseMixin from '../../_util/BaseMixin'
|
|
|
|
const Email = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
checkSpecial (rule, value, callback) {
|
|
setTimeout(() => {
|
|
if (value === 'yiminghe@gmail.com') {
|
|
callback('can not be!')
|
|
} else {
|
|
callback()
|
|
}
|
|
}, 1000)
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { getFieldProps, getFieldError, isFieldValidating } = this.form
|
|
const errors = getFieldError('email')
|
|
return (<div style={ regionStyle }>
|
|
<div>email validate onBlur</div>
|
|
<div>
|
|
<input {...getFieldProps('email', {
|
|
initialValue: '',
|
|
validateFirst: true,
|
|
rules: [
|
|
{
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'email',
|
|
message: '错误的 email 格式',
|
|
},
|
|
this.checkSpecial,
|
|
],
|
|
validateTrigger: 'blur',
|
|
})}
|
|
/></div>
|
|
<div style={errorStyle}>
|
|
{errors ? errors.join(',') : null}
|
|
</div>
|
|
<div style={errorStyle}>
|
|
{isFieldValidating('email') ? 'validating' : null}
|
|
</div>
|
|
</div>)
|
|
},
|
|
}
|
|
|
|
const Form = {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
form: Object,
|
|
},
|
|
data () {
|
|
return {
|
|
loading: true,
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
setTimeout(() => {
|
|
this.setState({
|
|
loading: false,
|
|
}, () => {
|
|
setTimeout(() => {
|
|
this.form.setFieldsInitialValue({
|
|
email: 'xx@gmail.com',
|
|
})
|
|
}, 1000)
|
|
})
|
|
}, 1000)
|
|
},
|
|
methods: {
|
|
onSubmit (e) {
|
|
e.preventDefault()
|
|
this.form.submit((callback) => {
|
|
setTimeout(() => {
|
|
this.form.validateFields((error, values) => {
|
|
if (!error) {
|
|
console.log('ok', values)
|
|
} else {
|
|
console.log('error', error, values)
|
|
}
|
|
callback()
|
|
})
|
|
}, 1000)
|
|
})
|
|
},
|
|
|
|
reset (e) {
|
|
e.preventDefault()
|
|
this.form.resetFields()
|
|
},
|
|
},
|
|
|
|
render () {
|
|
if (this.loading) {
|
|
return <b>loading</b>
|
|
}
|
|
const { form } = this
|
|
const disabled = form.isFieldsValidating() || form.isSubmitting()
|
|
return (<div style={{ margin: 20 }}>
|
|
<h2>async init field</h2>
|
|
<form onSubmit={this.onSubmit}>
|
|
<Email form={ form }/>
|
|
|
|
<div style={ regionStyle }>
|
|
<button disabled={disabled} type='submit'>submit</button>
|
|
{disabled ? <span style={{ color: 'red' }}>disabled</span> : null}
|
|
<button disabled={disabled} onClick={this.reset}>reset</button>
|
|
</div>
|
|
</form>
|
|
</div>)
|
|
},
|
|
}
|
|
|
|
export default createForm()(Form)
|