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

52 lines
1.0 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);