fix: filter invalid form items #4435

Author: tangjinzhou

components/form/FormItem.tsx

@@ -1,4 +1,4 @@
-import type { PropType, ExtractPropTypes, ComputedRef } from 'vue';
+import { PropType, ExtractPropTypes, ComputedRef, watch } from 'vue';
 import { defineComponent, computed, nextTick, ref, watchEffect, onBeforeUnmount } from 'vue';
 import cloneDeep from 'lodash-es/cloneDeep';
 import PropTypes from '../_util/vue-types';
@@ -271,16 +271,31 @@ export default defineComponent({
       clearValidate,
       resetField,
     });
-    formContext.addField(eventKey, {
-      fieldValue,
-      fieldId,
+    let registered = false;
+    watch(
       fieldName,
-      resetField,
-      clearValidate,
-      namePath,
-      validateRules,
-      rules: rulesRef,
-    });
+      val => {
+        if (val) {
+          if (!registered) {
+            registered = true;
+            formContext.addField(eventKey, {
+              fieldValue,
+              fieldId,
+              fieldName,
+              resetField,
+              clearValidate,
+              namePath,
+              validateRules,
+              rules: rulesRef,
+            });
+          }
+        } else {
+          registered = false;
+          formContext.removeField(eventKey);
+        }
+      },
+      { immediate: true },
+    );
     onBeforeUnmount(() => {
       formContext.removeField(eventKey);
     });