fix: Change name should rest field (#102)

* Add wrapper component

* Add key for Field diff

* add ignore

* test case

Author: zombieJ

.gitignore

@@ -8,4 +8,5 @@ lib/
 ~*
 yarn.lock
 package-lock.json
-.idea/
+.idea/
+examples/debug.tsx

src/Field.tsx

@@ -49,7 +49,7 @@ interface ChildProps {
   [name: string]: any;
 }
 
-export interface FieldProps {
+export interface InternalFieldProps {
   children?:
     | React.ReactElement
     | ((control: ChildProps, meta: Meta, form: FormInstance) => React.ReactNode);
@@ -60,7 +60,7 @@ export interface FieldProps {
    */
   dependencies?: NamePath[];
   getValueFromEvent?: (...args: EventArgs) => StoreValue;
-  name?: NamePath;
+  name?: InternalNamePath;
   normalize?: (value: StoreValue, prevValue: StoreValue, allValues: Store) => StoreValue;
   rules?: Rule[];
   shouldUpdate?: ShouldUpdate;
@@ -72,12 +72,16 @@ export interface FieldProps {
   onReset?: () => void;
 }
 
+export interface FieldProps extends Omit<InternalFieldProps, 'name'> {
+  name?: NamePath;
+}
+
 export interface FieldState {
   resetCount: number;
 }
 
 // We use Class instead of Hooks here since it will cost much code by using Hooks.
-class Field extends React.Component<FieldProps, FieldState> implements FieldEntity {
+class Field extends React.Component<InternalFieldProps, FieldState> implements FieldEntity {
   public static contextType = FieldContext;
 
   public static defaultProps = {
@@ -129,9 +133,8 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
   public getNamePath = (): InternalNamePath => {
     const { name } = this.props;
     const { prefixName = [] }: InternalFormInstance = this.context;
-    const namePath = getNamePath(name);
 
-    return 'name' in this.props ? [...prefixName, ...namePath] : [];
+    return name !== undefined ? [...prefixName, ...name] : [];
   };
 
   public getRules = (): RuleObject[] => {
@@ -456,4 +459,9 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
   }
 }
 
-export default Field;
+const WrapperField: React.FC<FieldProps> = ({ name, ...restProps }) => {
+  const namePath = name !== undefined ? getNamePath(name) : undefined;
+  return <Field key={`_${(namePath || []).join('_')}`} name={namePath} {...restProps} />;
+};
+
+export default WrapperField;

tests/validate.test.js

@@ -439,5 +439,44 @@ describe('Form.Validate', () => {
     matchError(wrapper, false);
     expect(onFinish).toHaveBeenCalledWith({ username: 'test' });
   });
+
+  it('switch to remove errors', async () => {
+    const Demo = () => {
+      const [checked, setChecked] = React.useState(true);
+
+      return (
+        <Form>
+          <button
+            type="button"
+            onClick={() => {
+              setChecked(!checked);
+            }}
+          />
+          <InfoField
+            name={checked ? 'username' : 'age'}
+            rules={
+              checked
+                ? [
+                    {
+                      validator(rule, value, callback) {
+                        callback('Integer number only!');
+                      },
+                    },
+                  ]
+                : []
+            }
+          />
+        </Form>
+      );
+    };
+    const wrapper = mount(<Demo />);
+
+    await changeValue(wrapper, '233');
+    matchError(wrapper, true);
+
+    wrapper.find('button').simulate('click');
+    wrapper.update();
+    matchError(wrapper, false);
+  });
 });
 /* eslint-enable no-template-curly-in-string */