🥳 feature: useFieldArray rules props (#8102) (#8562)

* V8: feature: useFieldArray rules props (#8102) * useFieldArray rules prop * remove required prop * combine logic within validateField * remove logic * update unset method to support root node in array * update api extrator * update type * update useEffect validation logic * update api extrator * fix submit field array error * extract logic into its own function for update root error object * 8.0.0-alpha.3 * update with unit tests coverage for rules validate, minLength and maxLength * include support for required prop for consitent API and test coverage * update API * save some bytes * upgrade to react 18 * Revert "upgrade to react 18" This reverts commit d1c3bf7. * update react * fix cypress test * remove render count * udpate package and include test coverage for nested field array * fix unit and cypress tests * update lock file * revert package * avoid react native breaking change and fix test * fix test and type error * 🚔 close #8653 when useFormContext provide no generic for type check (#8654) * close #8653 when useFormContext provide no generic for type check * update api contract * 🛰 useFormContext include type tests (#8656) * Revert "🚔 close #8653 when useFormContext provide no generic for type check (#8654)" This reverts commit 2e0c3f8. * Revert "🛰 useFormContext include type tests (#8656)" This reverts commit 34af5b3. * 🥼 update changelog related to #8653 * 7.34.0-next.0 * check validation required for field array if not array or empty length * include unit tests coverage for validate fields for array fields * update api extrator
react-hook-form · Jul 13, 2022 · f27824d · f27824d
1 parent 3a461d6
commit f27824d
Show file tree

Hide file tree

Showing 15 changed files with 875 additions and 35 deletions.
diff --git a/cypress/integration/basicSchemaValidation.ts b/cypress/integration/basicSchemaValidation.ts
@@ -105,6 +105,7 @@ describe('basicSchemaValidation form validation', () => {
     cy.get('input[name="lastName"] + p').contains('lastName error');
     cy.get('input[name="lastName"]').type('luo123456');
     cy.get('input[name="lastName"] + p').contains('lastName error');
+    cy.get('select[name="selectNumber"]').select('1');
     cy.get('select[name="selectNumber"]').select('');
     cy.get('select[name="selectNumber"] + p').contains('selectNumber error');
     cy.get('select[name="selectNumber"]').select('1');

diff --git a/cypress/integration/customSchemaValidation.ts b/cypress/integration/customSchemaValidation.ts
@@ -103,6 +103,7 @@ describe('customSchemaValidation form validation', () => {
     cy.get('input[name="lastName"] + p').contains('lastName error');
     cy.get('input[name="lastName"]').type('luo123456');
     cy.get('input[name="lastName"] + p').contains('lastName error');
+    cy.get('select[name="selectNumber"]').select('1');
     cy.get('select[name="selectNumber"]').select('');
     cy.get('select[name="selectNumber"] + p').contains('selectNumber error');
     cy.get('select[name="selectNumber"]').select('1');

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-hook-form",
   "description": "Performant, flexible and extensible forms library for React Hooks",
-  "version": "7.33.1",
+  "version": "7.34.0-next.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
   "umd:main": "dist/index.umd.js",

diff --git a/reports/api-extractor.md b/reports/api-extractor.md
@@ -191,6 +191,7 @@ export type FieldElement<TFieldValues extends FieldValues = FieldValues> = HTMLI
 // @public (undocumented)
 export type FieldError = {
     type: LiteralUnion<keyof RegisterOptions, string>;
+    root?: FieldError;
     ref?: Ref;
     types?: MultipleFieldErrors;
     message?: Message;
@@ -340,7 +341,7 @@ export type Names = {
 };
 
 // @public (undocumented)
-export type NativeFieldValue = string | number | boolean | null | undefined;
+export type NativeFieldValue = string | number | boolean | null | undefined | unknown[];
 
 // @public @deprecated (undocumented)
 export type NestedValue<TValue extends object = object> = {
@@ -519,6 +520,7 @@ export type UseFieldArrayProps<TFieldValues extends FieldValues = FieldValues, T
     name: TFieldArrayName;
     keyName?: TKeyName;
     control?: Control<TFieldValues>;
+    rules?: Pick<RegisterOptions<TFieldValues>, 'maxLength' | 'minLength' | 'validate' | 'required'>;
     shouldUnregister?: boolean;
 };
 

diff --git a/src/__tests__/logic/validateField.test.tsx b/src/__tests__/logic/validateField.test.tsx
@@ -1900,4 +1900,117 @@ describe('validateField', () => {
       ).toEqual({});
     });
   });
+
+  it('should validate field array with required attribute', async () => {
+    expect(
+      await validateField(
+        {
+          _f: {
+            name: 'test',
+            ref: {
+              name: 'test',
+              value: '',
+            },
+            value: undefined,
+            required: true,
+            mount: true,
+          },
+        },
+        undefined,
+        false,
+        false,
+        true,
+      ),
+    ).toEqual({
+      test: {
+        message: '',
+        ref: {
+          name: 'test',
+          value: '',
+        },
+        type: 'required',
+      },
+    });
+
+    expect(
+      await validateField(
+        {
+          _f: {
+            name: 'test',
+            ref: {
+              name: 'test',
+              value: '',
+            },
+            value: [],
+            required: true,
+            mount: true,
+          },
+        },
+        [],
+        false,
+        false,
+        true,
+      ),
+    ).toEqual({
+      test: {
+        message: '',
+        ref: {
+          name: 'test',
+          value: '',
+        },
+        type: 'required',
+      },
+    });
+
+    expect(
+      await validateField(
+        {
+          _f: {
+            name: 'test',
+            ref: {
+              name: 'test',
+              value: '',
+            },
+            value: null,
+            required: true,
+            mount: true,
+          },
+        },
+        null,
+        false,
+        false,
+        true,
+      ),
+    ).toEqual({
+      test: {
+        message: '',
+        ref: {
+          name: 'test',
+          value: '',
+        },
+        type: 'required',
+      },
+    });
+
+    expect(
+      await validateField(
+        {
+          _f: {
+            name: 'test',
+            ref: {
+              name: 'test',
+              value: '',
+            },
+            value: [],
+            required: true,
+            mount: true,
+          },
+        },
+        [{}],
+        false,
+        false,
+        true,
+      ),
+    ).toEqual({});
+  });
 });