Merge pull request #360 from panichevoleg/feature/640794-form-validation

Updated `Form` component to have onValidate callback
ZEISS · Feb 1, 2022 · 251f88d · 251f88d
2 parents 3d37742 + 4c7151b
commit 251f88d
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 2.1.5
 
 - Improved trigger and added CNAME to kitchen sink
+- Updated `Form` component to have `onValidate` callback
 
 ## 2.1.4
 

diff --git a/src/components/Form/index.tsx b/src/components/Form/index.tsx
@@ -30,6 +30,17 @@ export interface FormChangeEvent {
   changed: boolean;
 }
 
+export interface FormValidateEvent {
+  /**
+   * The current values of the form fields.
+   */
+  value: FormValuesData;
+  /**
+   * Validation errors
+   */
+  errors?: Array<FormValidationError>;
+}
+
 export interface FormValuesData {
   [name: string]: any;
 }
@@ -65,6 +76,10 @@ export interface FormProps<FormValues> extends StandardProps {
    * Event emitted when the form is submitted.
    */
   onSubmit?(e: FormSubmitEvent): void;
+  /**
+   * Event emitted when form errors are set or cleared
+   */
+  onValidate?(e: FormValidateEvent): void;
   /**
    * Disables the form in case of invalid input. Effectively
    * disables the possibility of submitting forms.
@@ -159,6 +174,26 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
     }
   }
 
+  componentDidUpdate(_: FormProps<Values>, prevState: FormState<Values>) {
+    const { onValidate } = this.props;
+    const { errors, current } = this.state;
+
+    if (typeof onValidate === 'function' && JSON.stringify(prevState.errors) !== JSON.stringify(errors)) {
+      const arrayErrors = this.getErrorsAsArray(errors);
+      onValidate({ errors: arrayErrors, value: current });
+    }
+  }
+
+  private getErrorsAsArray(errors: FormState<Values>['errors']) {
+    return Object.keys(errors).reduce<Array<FormValidationError>>((arrayErrors, field) => {
+      const error = errors[field];
+      if (error) {
+        arrayErrors.push({ field, error });
+      }
+      return arrayErrors;
+    }, []);
+  }
+
   private setValues(current: Values, changed: boolean) {
     const keys = Object.keys(current);
 
@@ -248,7 +283,7 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
         if (name) {
           this.fields.push(field);
 
-          let error;
+          let error: React.ReactChild | undefined;
           if (name in current) {
             const value = current[name];
             error = this.getError(name, value);
@@ -262,7 +297,7 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
           }
 
           if (error) {
-            this.setState({ errors: { ...errors, [name]: error } as FormState<Values>['errors'] });
+            this.setState(({ errors }) => ({ errors: { ...errors, [name]: error } }));
           }
         }
       },
@@ -280,13 +315,7 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
     this.setErrors(current);
 
     if (!disabled && typeof onSubmit === 'function') {
-      const arrayErrors = Object.keys(errors).reduce<Array<FormValidationError>>((arrayErrors, field) => {
-        const error = errors[field];
-        if (error) {
-          arrayErrors.push({ field, error });
-        }
-        return arrayErrors;
-      }, []);
+      const arrayErrors = this.getErrorsAsArray(errors);
 
       this.setState(
         {