Merge pull request #28918 from ant-design/fix-nest-noStyle

fix: noStyle nest Error collection

components/form/FormItem.tsx

@@ -20,6 +20,8 @@ import { cloneElement, isValidElement } from '../_util/reactNode';
 import useFrameState from './hooks/useFrameState';
 import useItemRef from './hooks/useItemRef';
 
+const NAME_SPLIT = '__SPLIT__';
+
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
 export type ValidateStatus = typeof ValidateStatuses[number];
 
@@ -115,7 +117,7 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
   React.useEffect(
     () => () => {
       destroyRef.current = true;
-      updateItemErrors(nameRef.current.join('__SPLIT__'), []);
+      updateItemErrors(nameRef.current.join(NAME_SPLIT), []);
     },
     [],
   );
@@ -126,8 +128,13 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
   // Collect noStyle Field error to the top FormItem
   const updateChildItemErrors = noStyle
     ? updateItemErrors
-    : (subName: string, subErrors: string[]) => {
+    : (subName: string, subErrors: string[], originSubName: string) => {
         setInlineErrors((prevInlineErrors = {}) => {
+          // Clean up origin error when name changed
+          if (originSubName !== subName) {
+            delete prevInlineErrors[originSubName];
+          }
+
           if (!isEqual(prevInlineErrors[subName], subErrors)) {
             return {
               ...prevInlineErrors,
@@ -280,12 +287,15 @@ function FormItem<Values = any>(props: FormItemProps<Values>): React.ReactElemen
         const fieldId = getFieldId(mergedName, formName);
 
         if (noStyle) {
+          // Clean up origin one
+          const originErrorName = nameRef.current.join(NAME_SPLIT);
+
           nameRef.current = [...mergedName];
           if (fieldKey) {
             const fieldKeys = Array.isArray(fieldKey) ? fieldKey : [fieldKey];
             nameRef.current = [...mergedName.slice(0, -1), ...fieldKeys];
           }
-          updateItemErrors(nameRef.current.join('__SPLIT__'), errors);
+          updateItemErrors(nameRef.current.join(NAME_SPLIT), errors, originErrorName);
         }
 
         const isRequired =

components/form/__tests__/list-noStyle.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Form from '..';
+import Input from '../../input';
+import { sleep } from '../../../tests/utils';
+import { FormListOperation } from '../FormList';
+
+describe('Form.List.NoStyle', () => {
+  it('nest error should clean up', async () => {
+    jest.useFakeTimers();
+
+    let operation: FormListOperation;
+
+    const wrapper = mount(
+      <Form>
+        <Form.List name="users">
+          {(fields, op) => {
+            operation = op;
+
+            return fields.map(field => (
+              <Form.Item key={field.key}>
+                <Form.Item
+                  {...field}
+                  name={[field.name, 'first']}
+                  fieldKey={[field.fieldKey, 'first']}
+                  rules={[{ required: true }]}
+                  noStyle
+                >
+                  <Input />
+                </Form.Item>
+              </Form.Item>
+            ));
+          }}
+        </Form.List>
+      </Form>,
+    );
+
+    // Add two
+    async function addItem() {
+      await act(async () => {
+        operation!.add();
+        await sleep(100);
+        jest.runAllTimers();
+        wrapper.update();
+      });
+    }
+
+    addItem();
+    addItem();
+
+    // Submit
+    await act(async () => {
+      wrapper.find('form').simulate('submit');
+      await sleep(100);
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // Remove first field
+    await act(async () => {
+      operation!.remove(0);
+      await sleep(100);
+      jest.runAllTimers();
+      wrapper.update();
+    });
+
+    // Match error message
+    expect(wrapper.find('.ant-form-item-explain-error').text()).toEqual(
+      "'users.1.first' is required",
+    );
+
+    jest.useRealTimers();
+  });
+});

components/form/context.tsx

@@ -27,7 +27,7 @@ export const FormContext = React.createContext<FormContextProps>({
 
 /** Form Item Context. Used for Form noStyle Item error collection */
 export interface FormItemContextProps {
-  updateItemErrors: (name: string, errors: string[]) => void;
+  updateItemErrors: (name: string, errors: string[], originName?: string) => void;
 }
 
 export const FormItemContext = React.createContext<FormItemContextProps>({