84 lines
1.5 KiB
JavaScript
84 lines
1.5 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index';
|
|
import { regionStyle } from './styles';
|
|
import { Switch } from 'ant-design-vue';
|
|
|
|
const TopForm = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
render() {
|
|
const { getFieldProps } = this.form;
|
|
return (
|
|
<div style={regionStyle}>
|
|
<div>has email?</div>
|
|
<div>
|
|
<Switch {...getFieldProps('on', { initialValue: true, valuePropName: 'checked' })} />
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const BottomForm = {
|
|
props: {
|
|
form: Object,
|
|
on: Boolean,
|
|
},
|
|
render() {
|
|
const { form } = this;
|
|
const on = form.getFieldValue('on');
|
|
const style = {
|
|
...regionStyle,
|
|
display: on ? 'block' : 'none',
|
|
};
|
|
return (
|
|
<div style={style}>
|
|
<div>email:</div>
|
|
<div>
|
|
<input {...form.getFieldProps('email', { rules: [{ type: 'email' }], hidden: !on })} />
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
onSubmit(e) {
|
|
e.preventDefault();
|
|
console.log(this.form.getFieldsValue());
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { form } = this;
|
|
return (
|
|
<div>
|
|
<TopForm form={form} />
|
|
<BottomForm form={form} />
|
|
<div style={regionStyle}>
|
|
<button onClick={this.onSubmit}>submit</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const NewForm = createForm()(Form);
|
|
|
|
export default {
|
|
render() {
|
|
return (
|
|
<div>
|
|
<h2>parallel form</h2>
|
|
<NewForm />
|
|
</div>
|
|
);
|
|
},
|
|
};
|