feat: add form support template

Author: tangjinzhou

components/form/Form.jsx

@@ -57,6 +57,7 @@ export const FormProps = {
   // onSubmit: React.FormEventHandler<any>;
   prefixCls: PropTypes.string,
   hideRequiredMark: PropTypes.bool,
+  formRef: PropTypes.func,
 }
 
 export const ValidationRule = {
@@ -178,7 +179,7 @@ export default {
 
   render () {
     const {
-      prefixCls, hideRequiredMark, layout, onSubmit, $slots,
+      prefixCls, hideRequiredMark, layout, onSubmit, $slots, formRef,
     } = this
 
     const formClassName = classNames(prefixCls, {
@@ -187,6 +188,26 @@ export default {
       [`${prefixCls}-inline`]: layout === 'inline',
       [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
     })
+    if (formRef) {
+      const NewForm = createDOMForm({
+        fieldNameProp: 'id',
+        fieldMetaProp: FIELD_META_PROP,
+        fieldDataProp: FIELD_DATA_PROP,
+      })({
+        provide () {
+          return {
+            NewFormProps: this.$props,
+          }
+        },
+        mounted () {
+          formRef(this.form)
+        },
+        render () {
+          return <form onSubmit={onSubmit} class={formClassName}>{$slots.default}</form>
+        },
+      })
+      return <NewForm />
+    }
 
     return <form onSubmit={onSubmit} class={formClassName}>{$slots.default}</form>
   },

components/form/FormItem.jsx

@@ -20,6 +20,8 @@ export const FormItemProps = {
   hasFeedback: PropTypes.bool,
   required: PropTypes.bool,
   colon: PropTypes.bool,
+  fieldDecoratorId: PropTypes.string,
+  fieldDecoratorOptions: PropTypes.object,
 }
 
 export default {
@@ -33,6 +35,7 @@ export default {
   }),
   inject: {
     FormProps: { default: {}},
+    NewFormProps: { default: {}},
   },
   data () {
     return { helpShow: false }
@@ -90,7 +93,7 @@ export default {
     },
 
     getOnlyControl () {
-      const child = this.getControls(this.$slots.default, false)[0]
+      const child = this.getControls(this.slotDefault, false)[0]
       return child !== undefined ? child : null
     },
 
@@ -303,12 +306,20 @@ export default {
       ) : null
     },
     renderChildren () {
-      const { $slots } = this
+      // const { $slots, FormProps, NewFormProps, prop } = this
+      // const child = filterEmpty($slots.default || [])
+      // if (NewFormProps.form && prop && child.length) {
+      //   const getFieldDecorator = NewFormProps.form.getFieldDecorator
+      //   const rules = FormProps.rules[prop] || []
+      //   child[0] = getFieldDecorator(prop, {
+      //     rules,
+      //   })(child[0])
+      // }
       return [
         this.renderLabel(),
         this.renderWrapper(
           this.renderValidateWrapper(
-            filterEmpty($slots.default || []),
+            this.slotDefault,
             this.renderHelp(),
             this.renderExtra(),
           ),
@@ -333,6 +344,13 @@ export default {
   },
 
   render () {
+    const { $slots, NewFormProps, fieldDecoratorId, fieldDecoratorOptions = {}} = this
+    const child = filterEmpty($slots.default || [])
+    if (NewFormProps.form && fieldDecoratorId && child.length) {
+      const getFieldDecorator = NewFormProps.form.getFieldDecorator
+      child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions)(child[0])
+    }
+    this.slotDefault = child
     const children = this.renderChildren()
     return this.renderFormItem(children)
   },

components/form/demo/test.vue

@@ -0,0 +1,70 @@
+<template>
+<div>
+  <a-form @submit="handleSubmit" :formRef="(form)=>{this.form = form}">
+    <a-form-item
+      label='Note'
+      :labelCol="{ span: 5 }"
+      :wrapperCol="{ span: 12 }"
+      fieldDecoratorId="note"
+      :fieldDecoratorOptions="{rules: [{ required: true, message: 'Please input your note!' }]}"
+    >
+      <a-input />
+    </a-form-item>
+    <a-form-item
+      label='Gender'
+      :labelCol="{ span: 5 }"
+      :wrapperCol="{ span: 12 }"
+      fieldDecoratorId="gender"
+      :fieldDecoratorOptions="{rules: [{ required: true, message: 'Please select your gender!' }]}"
+    >
+      <a-select
+        placeholder='Select a option and change input text above'
+        @change="this.handleSelectChange"
+      >
+        <a-select-option value='male'>male</a-select-option>
+        <a-select-option value='female'>female</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item
+      :wrapperCol="{ span: 12, offset: 5 }"
+    >
+      <a-button type='primary' htmlType='submit'>
+        Submit
+      </a-button>
+    </a-form-item>
+  </a-form>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      formLayout: 'horizontal',
+      rules: {
+        test: [{
+          type: 'email', message: 'The input is not valid E-mail!',
+        }, {
+          required: true, message: 'Please input your E-mail!',
+        }],
+      },
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+    handleSelectChange (value) {
+      console.log(value)
+      this.form.setFieldsValue({
+        note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
+      })
+    },
+  },
+}
+</script>

site/dev.js

@@ -10,7 +10,7 @@ import Api from './components/api'
 import './components'
 import demoBox from './components/demoBox'
 import demoContainer from './components/demoContainer'
-import Test from '../components/list/demo/test'
+import Test from '../components/form/demo/test'
 
 Vue.use(VueClipboard)
 Vue.use(VueRouter)