feat: support validate recursive (#226)

* feat: support validate recursive

* Update src/interface.ts

Co-authored-by: 二货机器人 <[email protected]>

* Update src/useForm.ts

Co-authored-by: 二货机器人 <[email protected]>

* Update src/useForm.ts

Co-authored-by: 二货机器人 <[email protected]>

* prettier all code

Co-authored-by: 二货机器人 <[email protected]>

Author: chenshuai2144

src/interface.ts

@@ -119,6 +119,11 @@ export interface FieldError {
 export interface ValidateOptions {
   triggerName?: string;
   validateMessages?: ValidateMessages;
+  /**
+   * Recursive validate. It will validate all the name path that contains the provided one.
+   * e.g. ['a'] will validate ['a'] , ['a', 'b'] and ['a', 1].
+   */
+  recursive?: boolean;
 }
 
 export type InternalValidateFields = (

src/useForm.ts

@@ -712,13 +712,27 @@ export class FormStore {
         namePathList.push(field.getNamePath());
       }
 
+      /**
+       * Recursive validate if configured.
+       * TODO: perf improvement @zombieJ
+       */
+      if (options?.recursive && provideNameList) {
+        const namePath = field.getNamePath();
+        if (
+          // nameList[i] === undefined 说明是以 nameList 开头的
+          // ['name'] -> ['name','list']
+          namePath.every((nameUnit, i) => nameList[i] === nameUnit || nameList[i] === undefined)
+        ) {
+          namePathList.push(namePath);
+        }
+      }
+
       // Skip if without rule
       if (!field.props.rules || !field.props.rules.length) {
         return;
       }
 
       const fieldNamePath = field.getNamePath();
-
       // Add field validate rule in to promise list
       if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
         const promise = field.validateRules({

tests/validate.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable no-template-curly-in-string */
 import React from 'react';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Form, { Field, useForm } from '../src';
 import InfoField, { Input } from './common/InfoField';
 import { changeValue, matchError, getField } from './common';
@@ -686,5 +687,40 @@ describe('Form.Validate', () => {
     expect(failedTriggerTimes).toEqual(1);
     expect(passedTriggerTimes).toEqual(1);
   });
+
+  it('validate support recursive', async () => {
+    let form;
+    const wrapper = mount(
+      <div>
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <InfoField name={['username', 'do']} rules={[{ required: true }]} />
+          <InfoField name={['username', 'list']} rules={[{ required: true }]} />
+        </Form>
+      </div>,
+    );
+
+    wrapper
+      .find('input')
+      .at(0)
+      .simulate('change', { target: { value: '' } });
+    await act(async () => {
+      await timeout();
+    });
+    wrapper.update();
+
+    try {
+      const values = await form.validateFields(['username'], { recursive: true });
+      expect(values.username.do).toBe('');
+    } catch (error) {
+      expect(error.errorFields.length).toBe(2);
+    }
+
+    const values = await form.validateFields(['username']);
+    expect(values.username.do).toBe('');
+  });
 });
 /* eslint-enable no-template-curly-in-string */