/* eslint react/no-multi-comp:0, no-console:0 */ import createDOMForm from '../src/createDOMForm'; import { DatePicker, Select } from 'ant-design-vue'; import { regionStyle, errorStyle } from './styles'; const { Option } = Select; 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: '', rules: [{ type: 'email', message: <b key="err">错误的 email 格式</b> }], })} /> </div> <div style={errorStyle}>{errors}</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> <span style={{ color: 'red', }} > * </span> user async validate </div> <div> <input {...getFieldProps('user', { initialValue: '', validateFirst: true, rules: [{ required: true }, { validator: this.userExists }], })} /> </div> <div style={errorStyle}>{errors ? errors.join(',') : null}</div> <div style={errorStyle}>{isFieldValidating('user') ? 'validating' : null}</div> </div> ); }, }; const CustomInput = { props: { form: Object, }, render() { const { getFieldProps, getFieldError, isFieldValidating } = this.form; const errors = getFieldError('select'); return ( <div style={regionStyle}> <div> <span style={{ color: 'red', }} > * </span> custom select sync validate </div> <div> <Select placeholder="please select" style={{ width: '200px', }} {...getFieldProps('select', { rules: [{ required: true }] })} > <Option value="1">1</Option> <Option value="2">2</Option> </Select> </div> <div style={errorStyle}>{errors ? errors.join(',') : null}</div> <div style={errorStyle}>{isFieldValidating('select') ? 'validating' : null}</div> </div> ); }, }; const DateInput = { props: { form: Object, }, render() { const { getFieldProps, getFieldError } = this.form; const errors = getFieldError('date'); return ( <div style={regionStyle}> <div> <span style={{ color: 'red', }} > * </span> DateInput sync validate </div> <div style={{ width: '200px', }} > <DatePicker placeholder="please select" {...getFieldProps('date', { rules: [{ required: true, type: 'object' }] })} /> </div> <div style={errorStyle}>{errors ? errors.join(',') : null}</div> </div> ); }, }; function toNumber(v) { if (v === undefined) { return v; } if (v === '') { return undefined; } if (v && v.trim() === '') { return NaN; } return Number(v); } const NumberInput = { props: { form: Object, }, render() { const { getFieldProps, getFieldError } = this.form; const errors = getFieldError('number'); return ( <div style={regionStyle}> <div>number input</div> <div> <input {...getFieldProps('number', { initialValue: '1', rules: [{ transform: toNumber, type: 'number' }], })} /> </div> <div style={errorStyle}>{errors ? errors.join(',') : null}</div> </div> ); }, }; const Form = { methods: { onSubmit(e) { console.log('submit'); e.preventDefault(); this.form.validateFieldsAndScroll( { scroll: { offsetTop: 20, }, }, (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; const { getFieldProps, getFieldError } = form; return ( <div style={{ margin: '20px', }} > <h2>overview</h2> <form onSubmit={this.onSubmit}> <User form={form} saveRef={this.saveRef} /> <NumberInput form={form} /> <Email form={form} /> <CustomInput form={form} /> <DateInput form={form} /> <div style={regionStyle}> <div>normal required input</div> <div> <input {...getFieldProps('normal', { initialValue: '', rules: [{ required: true }] })} /> </div> <div style={errorStyle}> {getFieldError('normal') ? getFieldError('normal').join(',') : null} </div> </div> <div style={regionStyle}> <button onClick={this.reset}>reset</button> <input type="submit" value="submit" /> </div> </form> </div> ); }, }; export default createDOMForm({ validateMessages: { required(field) { return `${field} 必填`; }, }, })(Form);