fix: control fields should correct handle error messages (#109)

* pass origin mark

* skip refresh

* fix error passing logic

* test case

Author: zombieJ

examples/redux.tsx

@@ -36,7 +36,7 @@ let App: any = ({ dispatch, fields }) => {
       }}
     >
       <h3>Redux Form</h3>
-      <p>It's no need to put data into redux store. But you can still do this.</p>
+      <p>It is no need to put data into redux store. But you can still do this.</p>
 
       <LabelField name="field">
         <Input />
@@ -76,12 +76,10 @@ let App: any = ({ dispatch, fields }) => {
 };
 App = connect((fields: any) => ({ fields }))(App);
 
-const Demo = () => {
-  return (
-    <Provider store={store}>
-      <App />
-    </Provider>
-  );
-};
+const Demo = () => (
+  <Provider store={store}>
+    <App />
+  </Provider>
+);
 
 export default Demo;

src/Field.tsx

@@ -208,7 +208,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
           if ('touched' in data) {
             this.touched = data.touched;
           }
-          if ('validating' in data) {
+          if ('validating' in data && !('originRCField' in data)) {
             this.validatePromise = data.validating ? Promise.resolve([]) : null;
           }
           if ('errors' in data) {

src/interface.ts

@@ -16,12 +16,15 @@ export interface Meta {
   name: InternalNamePath;
 }
 
+export interface InternalFieldData extends Meta {
+  value: StoreValue;
+}
+
 /**
  * Used by `setFields` config
  */
-export interface FieldData extends Partial<Omit<Meta, 'name'>> {
+export interface FieldData extends Partial<Omit<InternalFieldData, 'name'>> {
   name: NamePath;
-  value?: StoreValue;
 }
 
 export type RuleType =

src/useForm.ts

@@ -18,6 +18,7 @@ import {
   ValidateErrorEntity,
   StoreValue,
   Meta,
+  InternalFieldData,
 } from './interface';
 import { HOOK_MARK } from './FieldContext';
 import { allPromiseFinish } from './utils/asyncUtil';
@@ -347,16 +348,22 @@ export class FormStore {
     });
   };
 
-  private getFields = (): FieldData[] =>
+  private getFields = (): InternalFieldData[] =>
     this.getFieldEntities(true).map(
-      (field: FieldEntity): FieldData => {
+      (field: FieldEntity): InternalFieldData => {
         const namePath = field.getNamePath();
         const meta = field.getMeta();
-        return {
+        const fieldData = {
           ...meta,
           name: namePath,
           value: this.getFieldValue(namePath),
         };
+
+        Object.defineProperty(fieldData, 'originRCField', {
+          value: true,
+        });
+
+        return fieldData;
       },
     );
 
@@ -487,11 +494,30 @@ export class FormStore {
     return childrenFields;
   };
 
-  private triggerOnFieldsChange = (namePathList: InternalNamePath[]) => {
+  private triggerOnFieldsChange = (
+    namePathList: InternalNamePath[],
+    filedErrors?: FieldError[],
+  ) => {
     const { onFieldsChange } = this.callbacks;
 
     if (onFieldsChange) {
       const fields = this.getFields();
+
+      /**
+       * Fill errors since `fields` may be replaced by controlled fields
+       */
+      if (filedErrors) {
+        const cache = new NameMap<string[]>();
+        filedErrors.forEach(({ name, errors }) => {
+          cache.set(name, errors);
+        });
+
+        fields.forEach(field => {
+          // eslint-disable-next-line no-param-reassign
+          field.errors = cache.get(field.name) || field.errors;
+        });
+      }
+
       const changedFields = fields.filter(({ name: fieldName }) =>
         containsNamePath(namePathList, fieldName as InternalNamePath),
       );
@@ -565,7 +591,7 @@ export class FormStore {
         this.notifyObservers(this.store, resultNamePathList, {
           type: 'validateFinish',
         });
-        this.triggerOnFieldsChange(resultNamePathList);
+        this.triggerOnFieldsChange(resultNamePathList, results);
       });
 
     const returnPromise: Promise<Store | ValidateErrorEntity | string[]> = summaryPromise

tests/control.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import Form from '../src';
 import InfoField from './common/InfoField';
+import { changeValue, matchError } from './common';
 
 describe('Form.Control', () => {
   it('fields', () => {
@@ -18,4 +19,26 @@ describe('Form.Control', () => {
 
     expect(wrapper.find('input').props().value).toEqual('Bamboo');
   });
+
+  it('fully test', async () => {
+    const Test = () => {
+      const [fields, setFields] = React.useState([]);
+
+      return (
+        <Form
+          fields={fields}
+          onFieldsChange={(_, allFields) => {
+            setFields(allFields);
+          }}
+        >
+          <InfoField name="test" rules={[{ required: true }]} />
+        </Form>
+      );
+    };
+
+    const wrapper = mount(<Test />);
+
+    await changeValue(wrapper, '');
+    matchError(wrapper, "'test' is required");
+  });
 });