fix(core): unmounted field skip validation (#2066)

packages/core/src/__tests__/field.spec.ts

@@ -1224,6 +1224,23 @@ test('deep nested fields hidden and validate with middle hidden', async () => {
   expect(form.invalid).toBeFalsy()
 })
 
+test('fields unmount and validate', async () => {
+  const form = attach(createForm())
+  const field = attach(
+    form.createField({
+      name: 'parent',
+      required: true,
+    })
+  )
+  try {
+    await form.validate()
+  } catch {}
+  expect(form.invalid).toBeTruthy()
+  field.onUnmount();
+  await form.validate()
+  expect(form.invalid).toBeFalsy()
+})
+
 test('auto clean with ArrayField', () => {
   const form = attach(createForm())
   attach(

packages/core/src/shared/internals.ts

@@ -200,6 +200,7 @@ export const validateToFeedbacks = async (
   const takeSkipCondition = () => {
     if (field.display !== 'visible') return true
     if (field.pattern !== 'editable') return true
+    if (field.unmounted) return true
     return false
   }
 

packages/react/src/__tests__/field.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { act } from 'react-dom/test-utils'
 import { render, fireEvent, waitFor } from '@testing-library/react'
-import { createForm } from '@formily/core'
+import { createForm, onFieldUnmount } from '@formily/core'
 import {
   isField,
   Field as FieldType,
@@ -235,3 +235,53 @@ test('connect', async () => {
     expect(queryByText('read pretty')).toBeVisible()
   })
 })
+
+test('fields unmount and validate', async () => {
+  const fn = jest.fn();
+  const form = createForm({
+    initialValues: {
+      parent: {
+        type: 'mounted',
+      }
+    },
+    effects: () => {
+      onFieldUnmount('parent.child', () => {
+        fn()
+      })
+    }
+  })
+  const Parent = observer(() => {
+    const field = useField()
+    if (field.value.type === 'mounted') {
+      return <Field name='child' component={[Input]} validator={{required: true}} />
+    }
+    return <div data-testid='unmounted'></div>
+  })
+  act(async () => {
+    const MyComponent = () => {
+      return (
+        <FormProvider form={form}>
+          <Field name='parent' component={[Parent]} />
+        </FormProvider>
+      )
+    }
+    render(<MyComponent />)
+    try {
+      await form.validate()
+    } catch {}
+
+    expect(form.invalid).toBeTruthy()
+
+    form.query('parent').take((field) => {
+      field.setState((state) => {
+        state.value.type = 'unmounted'
+      })
+    })
+
+    await waitFor(() => {
+      expect(fn.mock.calls.length).toBe(1)
+    });
+    await form.validate()
+    expect(form.invalid).toBeFalsy()
+  })
+})