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

56 lines
1.1 KiB
JavaScript

/* eslint react/no-multi-comp:0, no-console:0 */
import { createForm } from '../index'
const Form = {
props: {
form: Object,
},
beforeMount () {
this.nameDecorator = this.form.getFieldDecorator('name', {
initialValue: '',
rules: [{
required: true,
message: 'What\'s your name?',
}],
})
},
methods: {
onSubmit (e) {
e.preventDefault()
this.form.validateFields((error, values) => {
if (!error) {
console.log('ok', values)
} else {
console.log('error', error, values)
}
})
},
onChange (e) {
console.log(e.target.value)
},
},
render () {
const { getFieldError } = this.form
return (
<form onSubmit={this.onSubmit}>
{this.nameDecorator(
<input
onInput={this.onChange}
/>
)}
<div style={{ color: 'red' }}>
{(getFieldError('name') || []).join(', ')}
</div>
<button>Submit</button>
</form>
)
},
}
export default createForm()(Form)