fix: formItem not update when a-form-item in child component #446

Author: tangjinzhou

components/form/Form.jsx

@@ -139,16 +139,45 @@ const Form = {
   createForm(context, options = {}) {
     return new Vue(Form.create({ ...options, templateContext: context })());
   },
+  created() {
+    this.formItemContexts = new Map();
+  },
   provide() {
     return {
       FormProps: this.$props,
+      // https://github.com/vueComponent/ant-design-vue/issues/446
+      collectFormItemContext:
+        this.form && this.form.templateContext
+          ? (c, type = 'add') => {
+              const formItemContexts = this.formItemContexts;
+              const number = formItemContexts.get(c) || 0;
+              if (type === 'delete') {
+                if (number <= 1) {
+                  formItemContexts.delete(c);
+                } else {
+                  formItemContexts.set(c, number - 1);
+                }
+              } else {
+                if (c !== this.form.templateContext) {
+                  formItemContexts.set(c, number + 1);
+                }
+              }
+            }
+          : () => {},
     };
   },
   watch: {
     form() {
       this.$forceUpdate();
     },
   },
+  beforeUpdate() {
+    this.formItemContexts.forEach((number, c) => {
+      if (c.$forceUpdate) {
+        c.$forceUpdate();
+      }
+    });
+  },
   updated() {
     if (this.form && this.form.cleanUpUselessFields) {
       this.form.cleanUpUselessFields();
@@ -232,7 +261,6 @@ const Form = {
         />
       );
     }
-
     return (
       <form onSubmit={onSubmit} class={formClassName}>
         {$slots.default}

components/form/FormItem.jsx

@@ -19,6 +19,7 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement, cloneVNodes } from '../_util/vnode';
 import Icon from '../icon';
 
+function noop(){}
 export const FormItemProps = {
   id: PropTypes.string,
   prefixCls: PropTypes.string,
@@ -47,10 +48,15 @@ export default {
   inject: {
     FormProps: { default: {} },
     decoratorFormProps: { default: {} },
+    collectFormItemContext: { default: () => noop },
   },
   data() {
+    this.collectFormItemContext(this.$vnode.context);
     return { helpShow: false };
   },
+  beforeDestroy() {
+    this.collectFormItemContext(this.$vnode.context, 'delete');
+  },
   mounted() {
     warning(
       this.getControls(this.slotDefault, true).length <= 1,

components/vc-form/src/createBaseForm.jsx

@@ -56,7 +56,7 @@ function createBaseForm(option = {}, mixins = []) {
       data() {
         const fields = mapPropsToFields && mapPropsToFields(this.$props);
         this.fieldsStore = createFieldsStore(fields || {});
-
+        this.templateContext = templateContext;
         this.instances = {};
         this.cachedBind = {};
         this.clearedFieldMetaCache = {};