feat: add validateOnMount to FormBase

bcgov · Jun 9, 2022 · 6235eaa · 6235eaa
1 parent 4980a60
commit 6235eaa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/app/components/Form/FormBase.tsx b/app/components/Form/FormBase.tsx
@@ -1,6 +1,7 @@
 import formTheme from "lib/theme/FormWithTheme";
-import { forwardRef, useMemo } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { FormProps, AjvError, withTheme } from "@rjsf/core";
+import validateFormData from "@rjsf/core/dist/cjs/validate";
 import { customTransformErrors } from "lib/theme/customTransformErrors";
 import {
   customFormats,
@@ -9,6 +10,7 @@ import {
 
 interface FormPropsWithTheme<T> extends FormProps<T> {
   theme?: any;
+  validateOnMount?: boolean;
 }
 
 const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
@@ -19,15 +21,32 @@ const FormBase: React.ForwardRefRenderFunction<any, FormPropsWithTheme<any>> = (
     () => withTheme(props.theme ?? formTheme),
     [props.theme]
   );
+
   const transformErrors = (errors: AjvError[]) => {
     return customTransformErrors(errors, customFormatsErrorMessages);
   };
+
+  const [extraErrors, setExtraErrors] = useState<any>();
+  useEffect(() => {
+    if (props.validateOnMount) {
+      setExtraErrors(
+        validateFormData(
+          props.formData,
+          props.schema,
+          props.validate,
+          transformErrors
+        ).errorSchema
+      );
+    }
+  }, []);
+
   return (
     <>
       <Form
         {...props}
         // @ts-ignore
         ref={ref}
+        extraErrors={extraErrors}
         customFormats={customFormats}
         transformErrors={transformErrors}
         noHtml5Validate

diff --git a/app/components/Form/ProjectForm.tsx b/app/components/Form/ProjectForm.tsx
@@ -96,6 +96,7 @@ const ProjectForm: React.FC<Props> = (props) => {
           id
           rowId
           newFormData
+          changeStatus
           isUniqueValue(columnName: "proposalReference")
           formChangeByPreviousFormChangeId {
             changeStatus
@@ -235,6 +236,7 @@ const ProjectForm: React.FC<Props> = (props) => {
         {...props}
         schema={schema}
         uiSchema={uiSchema}
+        validateOnMount={revision.projectFormChange.changeStatus === "staged"}
         validate={uniqueProposalReferenceValidation}
         formData={revision.projectFormChange.newFormData}
         formContext={{

diff --git a/app/mutations/FormChange/updateProjectFormChange.ts b/app/mutations/FormChange/updateProjectFormChange.ts
@@ -14,6 +14,7 @@ export const mutation = graphql`
     updateFormChange(input: $input) {
       formChange {
         id
+        changeStatus
         newFormData
         isUniqueValue(columnName: "proposalReference")
         projectRevisionByProjectRevisionId {