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

/* 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>
    )
  },
}