From 4c304c653afa6ef235deda3d2b3c27f0738925b1 Mon Sep 17 00:00:00 2001
From: Hein Jeong <heinje@amazon.com>
Date: Fri, 19 Aug 2022 00:45:45 +0000
Subject: [PATCH] chore: change form validation

---
 ...studio-ui-codegen-react-forms.test.ts.snap | 428 +++++++-----------
 .../lib/forms/form-renderer-helper.ts         | 302 ++++++++----
 .../lib/forms/react-form-renderer.ts          |  32 +-
 3 files changed, 383 insertions(+), 379 deletions(-)

diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
index 00058a495..9d96c7ad7 100644
--- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
+++ b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -3,11 +3,11 @@
 exports[`amplify form renderer tests custom form tests should render a custom backed form 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
-import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
+import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   Button,
   Flex,
@@ -25,24 +25,23 @@ export default function customDataForm(props) {
     overrides,
     ...rest
   } = props;
-  const [nameFieldError, setNameFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [emailFieldError, setEmailFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [cityFieldError, setCityFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [categoryFieldError, setCategoryFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
+  const [errors, setErrors] = useStateMutationAction({});
+  const validations = {
+    name: [],
+    email: [],
+    city: [],
+    category: [],
+  };
+  async function runValidationTasks(fieldName, value) {
+    const validationResponse = {
+      ...validateField(value, validations[fieldName]),
+      ...(await onValidate?.[fieldName]?.(value)),
+    };
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  }
   return (
     <form
       onSubmit={async (event) => {
@@ -69,15 +68,11 @@ export default function customDataForm(props) {
             defaultValue=\\"John Doe\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"name\\"]
-                ? await onValidate[\\"name\\"](value)
-                : validateField(value, []);
-              setNameFieldError({ ...nameFieldError, ...isValidResult });
-              setFormValid(!nameFieldError.hasError);
+              await runValidationTasks(\\"name\\", value);
               setModelFields({ ...modelFields, name: value });
             }}
-            errorMessage={nameFieldError.errorMessage}
-            hasError={nameFieldError.hasError}
+            errorMessage={errors.name.errorMessage}
+            hasError={errors.name.hasError}
             {...getOverrideProps(overrides, \\"name\\")}
           ></TextField>
         </Grid>
@@ -93,15 +88,11 @@ export default function customDataForm(props) {
             defaultValue=\\"johndoe@amplify.com\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"email\\"]
-                ? await onValidate[\\"email\\"](value)
-                : validateField(value, []);
-              setEmailFieldError({ ...emailFieldError, ...isValidResult });
-              setFormValid(!emailFieldError.hasError);
+              await runValidationTasks(\\"email\\", value);
               setModelFields({ ...modelFields, email: value });
             }}
-            errorMessage={emailFieldError.errorMessage}
-            hasError={emailFieldError.hasError}
+            errorMessage={errors.email.errorMessage}
+            hasError={errors.email.hasError}
             {...getOverrideProps(overrides, \\"email\\")}
           ></TextField>
         </Grid>
@@ -115,15 +106,11 @@ export default function customDataForm(props) {
             label=\\"Label\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"city\\"]
-                ? await onValidate[\\"city\\"](value)
-                : validateField(value, []);
-              setCityFieldError({ ...cityFieldError, ...isValidResult });
-              setFormValid(!cityFieldError.hasError);
+              await runValidationTasks(\\"city\\", value);
               setModelFields({ ...modelFields, city: value });
             }}
-            errorMessage={cityFieldError.errorMessage}
-            hasError={cityFieldError.hasError}
+            errorMessage={errors.city.errorMessage}
+            hasError={errors.city.hasError}
             {...getOverrideProps(overrides, \\"city\\")}
           >
             <option
@@ -156,18 +143,11 @@ export default function customDataForm(props) {
             defaultValue=\\"Hobbies\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"category\\"]
-                ? await onValidate[\\"category\\"](value)
-                : validateField(value, []);
-              setCategoryFieldError({
-                ...categoryFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!categoryFieldError.hasError);
+              await runValidationTasks(\\"category\\", value);
               setModelFields({ ...modelFields, category: value });
             }}
-            errorMessage={categoryFieldError.errorMessage}
-            hasError={categoryFieldError.hasError}
+            errorMessage={errors.category.errorMessage}
+            hasError={errors.category.hasError}
             {...getOverrideProps(overrides, \\"category\\")}
           >
             <Radio
@@ -211,7 +191,7 @@ export default function customDataForm(props) {
             children=\\"Submit\\"
             type=\\"submit\\"
             variation=\\"primary\\"
-            isDisabled={!formValid}
+            isDisabled={Object.values(errors).some((e) => e.hasError)}
             {...getOverrideProps(overrides, \\"SubmitButton\\")}
           ></Button>
         </Flex>
@@ -254,11 +234,11 @@ export default function customDataForm(props: customDataFormProps): React.ReactE
 exports[`amplify form renderer tests custom form tests should render sectional elements 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
-import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
+import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   Button,
   Divider,
@@ -276,12 +256,20 @@ export default function CustomWithSectionalElements(props) {
     overrides,
     ...rest
   } = props;
-  const [nameFieldError, setNameFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
+  const [errors, setErrors] = useStateMutationAction({});
+  const validations = {
+    name: [],
+  };
+  async function runValidationTasks(fieldName, value) {
+    const validationResponse = {
+      ...validateField(value, validations[fieldName]),
+      ...(await onValidate?.[fieldName]?.(value)),
+    };
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  }
   return (
     <form
       onSubmit={async (event) => {
@@ -318,15 +306,11 @@ export default function CustomWithSectionalElements(props) {
             label=\\"Label\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"name\\"]
-                ? await onValidate[\\"name\\"](value)
-                : validateField(value, []);
-              setNameFieldError({ ...nameFieldError, ...isValidResult });
-              setFormValid(!nameFieldError.hasError);
+              await runValidationTasks(\\"name\\", value);
               setModelFields({ ...modelFields, name: value });
             }}
-            errorMessage={nameFieldError.errorMessage}
-            hasError={nameFieldError.hasError}
+            errorMessage={errors.name.errorMessage}
+            hasError={errors.name.hasError}
             {...getOverrideProps(overrides, \\"name\\")}
           ></TextField>
         </Grid>
@@ -376,7 +360,7 @@ export default function CustomWithSectionalElements(props) {
             children=\\"Submit\\"
             type=\\"submit\\"
             variation=\\"primary\\"
-            isDisabled={!formValid}
+            isDisabled={Object.values(errors).some((e) => e.hasError)}
             {...getOverrideProps(overrides, \\"SubmitButton\\")}
           ></Button>
         </Flex>
@@ -419,11 +403,11 @@ export default function CustomWithSectionalElements(props: CustomWithSectionalEl
 exports[`amplify form renderer tests datastore form tests should generate a create form 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
-import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
+import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import { Post } from \\"../models\\";
 import { Button, Flex, Grid, TextField } from \\"@aws-amplify/ui-react\\";
 import { DataStore } from \\"aws-amplify\\";
@@ -436,22 +420,23 @@ export default function myPostForm(props) {
     overrides,
     ...rest
   } = props;
-  const [captionFieldError, setCaptionFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [usernameFieldError, setUsernameFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [post_urlFieldError, setPost_urlFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [profile_urlFieldError, setProfile_urlFieldError] =
-    useStateMutationAction({ hasError: false, errorMessage: \\"\\" });
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
+  const [errors, setErrors] = useStateMutationAction({});
+  const validations = {
+    caption: [],
+    username: [],
+    post_url: [{ type: \\"URL\\" }],
+    profile_url: [{ type: \\"URL\\" }],
+  };
+  async function runValidationTasks(fieldName, value) {
+    const validationResponse = {
+      ...validateField(value, validations[fieldName]),
+      ...(await onValidate?.[fieldName]?.(value)),
+    };
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  }
   return (
     <form
       onSubmit={async (event) => {
@@ -493,15 +478,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"caption\\"]
-                ? await onValidate[\\"caption\\"](value)
-                : validateField(value, []);
-              setCaptionFieldError({ ...captionFieldError, ...isValidResult });
-              setFormValid(!captionFieldError.hasError);
+              await runValidationTasks(\\"caption\\", value);
               setModelFields({ ...modelFields, caption: value });
             }}
-            errorMessage={captionFieldError.errorMessage}
-            hasError={captionFieldError.hasError}
+            errorMessage={errors.caption.errorMessage}
+            hasError={errors.caption.hasError}
             {...getOverrideProps(overrides, \\"caption\\")}
           ></TextField>
         </Grid>
@@ -517,18 +498,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"username\\"]
-                ? await onValidate[\\"username\\"](value)
-                : validateField(value, []);
-              setUsernameFieldError({
-                ...usernameFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!usernameFieldError.hasError);
+              await runValidationTasks(\\"username\\", value);
               setModelFields({ ...modelFields, username: value });
             }}
-            errorMessage={usernameFieldError.errorMessage}
-            hasError={usernameFieldError.hasError}
+            errorMessage={errors.username.errorMessage}
+            hasError={errors.username.hasError}
             {...getOverrideProps(overrides, \\"username\\")}
           ></TextField>
         </Grid>
@@ -544,18 +518,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"post_url\\"]
-                ? await onValidate[\\"post_url\\"](value)
-                : validateField(value, [{ type: \\"URL\\" }]);
-              setPost_urlFieldError({
-                ...post_urlFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!post_urlFieldError.hasError);
+              await runValidationTasks(\\"post_url\\", value);
               setModelFields({ ...modelFields, post_url: value });
             }}
-            errorMessage={post_urlFieldError.errorMessage}
-            hasError={post_urlFieldError.hasError}
+            errorMessage={errors.post_url.errorMessage}
+            hasError={errors.post_url.hasError}
             {...getOverrideProps(overrides, \\"post_url\\")}
           ></TextField>
         </Grid>
@@ -571,18 +538,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"profile_url\\"]
-                ? await onValidate[\\"profile_url\\"](value)
-                : validateField(value, [{ type: \\"URL\\" }]);
-              setProfile_urlFieldError({
-                ...profile_urlFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!profile_urlFieldError.hasError);
+              await runValidationTasks(\\"profile_url\\", value);
               setModelFields({ ...modelFields, profile_url: value });
             }}
-            errorMessage={profile_urlFieldError.errorMessage}
-            hasError={profile_urlFieldError.hasError}
+            errorMessage={errors.profile_url.errorMessage}
+            hasError={errors.profile_url.hasError}
             {...getOverrideProps(overrides, \\"profile_url\\")}
           ></TextField>
         </Grid>
@@ -610,7 +570,7 @@ export default function myPostForm(props) {
             children=\\"Submit\\"
             type=\\"submit\\"
             variation=\\"primary\\"
-            isDisabled={!formValid}
+            isDisabled={Object.values(errors).some((e) => e.hasError)}
             {...getOverrideProps(overrides, \\"SubmitButton\\")}
           ></Button>
         </Flex>
@@ -657,11 +617,11 @@ export default function myPostForm(props: myPostFormProps): React.ReactElement;
 exports[`amplify form renderer tests datastore form tests should generate a update form 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
-import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
+import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import { Post } from \\"../models\\";
 import {
   Button,
@@ -681,24 +641,24 @@ export default function myPostForm(props) {
     overrides,
     ...rest
   } = props;
-  const [TextAreaFieldbbd63464FieldError, setTextAreaFieldbbd63464FieldError] =
-    useStateMutationAction({ hasError: false, errorMessage: \\"\\" });
-  const [captionFieldError, setCaptionFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [usernameFieldError, setUsernameFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [profile_urlFieldError, setProfile_urlFieldError] =
-    useStateMutationAction({ hasError: false, errorMessage: \\"\\" });
-  const [post_urlFieldError, setPost_urlFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
+  const [errors, setErrors] = useStateMutationAction({});
+  const validations = {
+    TextAreaFieldbbd63464: [],
+    caption: [],
+    username: [],
+    profile_url: [{ type: \\"URL\\" }],
+    post_url: [{ type: \\"URL\\" }],
+  };
+  async function runValidationTasks(fieldName, value) {
+    const validationResponse = {
+      ...validateField(value, validations[fieldName]),
+      ...(await onValidate?.[fieldName]?.(value)),
+    };
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  }
   return (
     <form
       onSubmit={async (event) => {
@@ -743,18 +703,11 @@ export default function myPostForm(props) {
             label=\\"Label\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"TextAreaFieldbbd63464\\"]
-                ? await onValidate[\\"TextAreaFieldbbd63464\\"](value)
-                : validateField(value, []);
-              setTextAreaFieldbbd63464FieldError({
-                ...TextAreaFieldbbd63464FieldError,
-                ...isValidResult,
-              });
-              setFormValid(!TextAreaFieldbbd63464FieldError.hasError);
+              await runValidationTasks(\\"TextAreaFieldbbd63464\\", value);
               setModelFields({ ...modelFields, TextAreaFieldbbd63464: value });
             }}
-            errorMessage={TextAreaFieldbbd63464FieldError.errorMessage}
-            hasError={TextAreaFieldbbd63464FieldError.hasError}
+            errorMessage={errors.TextAreaFieldbbd63464.errorMessage}
+            hasError={errors.TextAreaFieldbbd63464.hasError}
             {...getOverrideProps(overrides, \\"TextAreaFieldbbd63464\\")}
           ></TextAreaField>
         </Grid>
@@ -770,15 +723,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"caption\\"]
-                ? await onValidate[\\"caption\\"](value)
-                : validateField(value, []);
-              setCaptionFieldError({ ...captionFieldError, ...isValidResult });
-              setFormValid(!captionFieldError.hasError);
+              await runValidationTasks(\\"caption\\", value);
               setModelFields({ ...modelFields, caption: value });
             }}
-            errorMessage={captionFieldError.errorMessage}
-            hasError={captionFieldError.hasError}
+            errorMessage={errors.caption.errorMessage}
+            hasError={errors.caption.hasError}
             {...getOverrideProps(overrides, \\"caption\\")}
           ></TextField>
         </Grid>
@@ -794,18 +743,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"username\\"]
-                ? await onValidate[\\"username\\"](value)
-                : validateField(value, []);
-              setUsernameFieldError({
-                ...usernameFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!usernameFieldError.hasError);
+              await runValidationTasks(\\"username\\", value);
               setModelFields({ ...modelFields, username: value });
             }}
-            errorMessage={usernameFieldError.errorMessage}
-            hasError={usernameFieldError.hasError}
+            errorMessage={errors.username.errorMessage}
+            hasError={errors.username.hasError}
             {...getOverrideProps(overrides, \\"username\\")}
           ></TextField>
         </Grid>
@@ -821,18 +763,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"profile_url\\"]
-                ? await onValidate[\\"profile_url\\"](value)
-                : validateField(value, [{ type: \\"URL\\" }]);
-              setProfile_urlFieldError({
-                ...profile_urlFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!profile_urlFieldError.hasError);
+              await runValidationTasks(\\"profile_url\\", value);
               setModelFields({ ...modelFields, profile_url: value });
             }}
-            errorMessage={profile_urlFieldError.errorMessage}
-            hasError={profile_urlFieldError.hasError}
+            errorMessage={errors.profile_url.errorMessage}
+            hasError={errors.profile_url.hasError}
             {...getOverrideProps(overrides, \\"profile_url\\")}
           ></TextField>
         </Grid>
@@ -848,18 +783,11 @@ export default function myPostForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"post_url\\"]
-                ? await onValidate[\\"post_url\\"](value)
-                : validateField(value, [{ type: \\"URL\\" }]);
-              setPost_urlFieldError({
-                ...post_urlFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!post_urlFieldError.hasError);
+              await runValidationTasks(\\"post_url\\", value);
               setModelFields({ ...modelFields, post_url: value });
             }}
-            errorMessage={post_urlFieldError.errorMessage}
-            hasError={post_urlFieldError.hasError}
+            errorMessage={errors.post_url.errorMessage}
+            hasError={errors.post_url.hasError}
             {...getOverrideProps(overrides, \\"post_url\\")}
           ></TextField>
         </Grid>
@@ -887,7 +815,7 @@ export default function myPostForm(props) {
             children=\\"Submit\\"
             type=\\"submit\\"
             variation=\\"primary\\"
-            isDisabled={!formValid}
+            isDisabled={Object.values(errors).some((e) => e.hasError)}
             {...getOverrideProps(overrides, \\"SubmitButton\\")}
           ></Button>
         </Flex>
@@ -937,11 +865,11 @@ export default function myPostForm(props: myPostFormProps): React.ReactElement;
 exports[`amplify form renderer tests datastore form tests should render a form with multiple date types 1`] = `
 "/* eslint-disable */
 import * as React from \\"react\\";
-import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import {
   getOverrideProps,
   useStateMutationAction,
 } from \\"@aws-amplify/ui-react/internal\\";
+import { validateField } from \\"@aws-amplify/codegen-ui-react\\";
 import { InputGallery } from \\"../models\\";
 import {
   Button,
@@ -963,36 +891,27 @@ export default function InputGalleryCreateForm(props) {
     overrides,
     ...rest
   } = props;
-  const [numFieldError, setNumFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [rootbeerFieldError, setRootbeerFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [maybeFieldError, setMaybeFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [maybeSlideFieldError, setMaybeSlideFieldError] =
-    useStateMutationAction({ hasError: false, errorMessage: \\"\\" });
-  const [maybeCheckFieldError, setMaybeCheckFieldError] =
-    useStateMutationAction({ hasError: false, errorMessage: \\"\\" });
-  const [timestampFieldError, setTimestampFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [ippyFieldError, setIppyFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
-  const [timeisnowFieldError, setTimeisnowFieldError] = useStateMutationAction({
-    hasError: false,
-    errorMessage: \\"\\",
-  });
   const [modelFields, setModelFields] = useStateMutationAction({});
   const [formValid, setFormValid] = useStateMutationAction(true);
+  const [errors, setErrors] = useStateMutationAction({});
+  const validations = {
+    num: [],
+    rootbeer: [],
+    maybe: [],
+    maybeSlide: [],
+    maybeCheck: [],
+    timestamp: [],
+    ippy: [{ type: \\"IpAddress\\" }],
+    timeisnow: [],
+  };
+  async function runValidationTasks(fieldName, value) {
+    const validationResponse = {
+      ...validateField(value, validations[fieldName]),
+      ...(await onValidate?.[fieldName]?.(value)),
+    };
+    setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
+    return validationResponse;
+  }
   return (
     <form
       onSubmit={async (event) => {
@@ -1035,15 +954,11 @@ export default function InputGalleryCreateForm(props) {
             type=\\"number\\"
             onChange={async (e) => {
               const value = parseInt(e.target.value);
-              const isValidResult = onValidate?.[\\"num\\"]
-                ? await onValidate[\\"num\\"](value)
-                : validateField(value, []);
-              setNumFieldError({ ...numFieldError, ...isValidResult });
-              setFormValid(!numFieldError.hasError);
+              await runValidationTasks(\\"num\\", value);
               setModelFields({ ...modelFields, num: value });
             }}
-            errorMessage={numFieldError.errorMessage}
-            hasError={numFieldError.hasError}
+            errorMessage={errors.num.errorMessage}
+            hasError={errors.num.hasError}
             {...getOverrideProps(overrides, \\"num\\")}
           ></TextField>
         </Grid>
@@ -1060,18 +975,11 @@ export default function InputGalleryCreateForm(props) {
             type=\\"number\\"
             onChange={async (e) => {
               const value = Number(e.target.value);
-              const isValidResult = onValidate?.[\\"rootbeer\\"]
-                ? await onValidate[\\"rootbeer\\"](value)
-                : validateField(value, []);
-              setRootbeerFieldError({
-                ...rootbeerFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!rootbeerFieldError.hasError);
+              await runValidationTasks(\\"rootbeer\\", value);
               setModelFields({ ...modelFields, rootbeer: value });
             }}
-            errorMessage={rootbeerFieldError.errorMessage}
-            hasError={rootbeerFieldError.hasError}
+            errorMessage={errors.rootbeer.errorMessage}
+            hasError={errors.rootbeer.hasError}
             {...getOverrideProps(overrides, \\"rootbeer\\")}
           ></TextField>
         </Grid>
@@ -1088,15 +996,11 @@ export default function InputGalleryCreateForm(props) {
             isRequired=\\"false\\"
             onChange={async (e) => {
               const value = e.target.value === \\"Yes\\";
-              const isValidResult = onValidate?.[\\"maybe\\"]
-                ? await onValidate[\\"maybe\\"](value)
-                : validateField(value, []);
-              setMaybeFieldError({ ...maybeFieldError, ...isValidResult });
-              setFormValid(!maybeFieldError.hasError);
+              await runValidationTasks(\\"maybe\\", value);
               setModelFields({ ...modelFields, maybe: value });
             }}
-            errorMessage={maybeFieldError.errorMessage}
-            hasError={maybeFieldError.hasError}
+            errorMessage={errors.maybe.errorMessage}
+            hasError={errors.maybe.hasError}
             {...getOverrideProps(overrides, \\"maybe\\")}
           >
             <Radio
@@ -1116,6 +1020,13 @@ export default function InputGalleryCreateForm(props) {
             children=\\"Maybe slide\\"
             isDisabled={false}
             defaultPressed={false}
+            onChange={async (e) => {
+              const value = e.target.checked;
+              await runValidationTasks(\\"maybeSlide\\", value);
+              setModelFields({ ...modelFields, maybeSlide: value });
+            }}
+            errorMessage={errors.maybeSlide.errorMessage}
+            hasError={errors.maybeSlide.hasError}
             {...getOverrideProps(overrides, \\"maybeSlide\\")}
           ></ToggleButton>
         </Grid>
@@ -1133,18 +1044,11 @@ export default function InputGalleryCreateForm(props) {
             defaultChecked={false}
             onChange={async (e) => {
               const value = e.target.checked;
-              const isValidResult = onValidate?.[\\"maybeCheck\\"]
-                ? await onValidate[\\"maybeCheck\\"](value)
-                : validateField(value, []);
-              setMaybeCheckFieldError({
-                ...maybeCheckFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!maybeCheckFieldError.hasError);
+              await runValidationTasks(\\"maybeCheck\\", value);
               setModelFields({ ...modelFields, maybeCheck: value });
             }}
-            errorMessage={maybeCheckFieldError.errorMessage}
-            hasError={maybeCheckFieldError.hasError}
+            errorMessage={errors.maybeCheck.errorMessage}
+            hasError={errors.maybeCheck.hasError}
             {...getOverrideProps(overrides, \\"maybeCheck\\")}
           ></CheckboxField>
         </Grid>
@@ -1161,18 +1065,11 @@ export default function InputGalleryCreateForm(props) {
             type=\\"datetime-local\\"
             onChange={async (e) => {
               const value = Number(new Date(e.target.value));
-              const isValidResult = onValidate?.[\\"timestamp\\"]
-                ? await onValidate[\\"timestamp\\"](value)
-                : validateField(value, []);
-              setTimestampFieldError({
-                ...timestampFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!timestampFieldError.hasError);
+              await runValidationTasks(\\"timestamp\\", value);
               setModelFields({ ...modelFields, timestamp: value });
             }}
-            errorMessage={timestampFieldError.errorMessage}
-            hasError={timestampFieldError.hasError}
+            errorMessage={errors.timestamp.errorMessage}
+            hasError={errors.timestamp.hasError}
             {...getOverrideProps(overrides, \\"timestamp\\")}
           ></TextField>
         </Grid>
@@ -1188,15 +1085,11 @@ export default function InputGalleryCreateForm(props) {
             isReadOnly={false}
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"ippy\\"]
-                ? await onValidate[\\"ippy\\"](value)
-                : validateField(value, [{ type: \\"IpAddress\\" }]);
-              setIppyFieldError({ ...ippyFieldError, ...isValidResult });
-              setFormValid(!ippyFieldError.hasError);
+              await runValidationTasks(\\"ippy\\", value);
               setModelFields({ ...modelFields, ippy: value });
             }}
-            errorMessage={ippyFieldError.errorMessage}
-            hasError={ippyFieldError.hasError}
+            errorMessage={errors.ippy.errorMessage}
+            hasError={errors.ippy.hasError}
             {...getOverrideProps(overrides, \\"ippy\\")}
           ></TextField>
         </Grid>
@@ -1213,18 +1106,11 @@ export default function InputGalleryCreateForm(props) {
             type=\\"time\\"
             onChange={async (e) => {
               const { value } = e.target;
-              const isValidResult = onValidate?.[\\"timeisnow\\"]
-                ? await onValidate[\\"timeisnow\\"](value)
-                : validateField(value, []);
-              setTimeisnowFieldError({
-                ...timeisnowFieldError,
-                ...isValidResult,
-              });
-              setFormValid(!timeisnowFieldError.hasError);
+              await runValidationTasks(\\"timeisnow\\", value);
               setModelFields({ ...modelFields, timeisnow: value });
             }}
-            errorMessage={timeisnowFieldError.errorMessage}
-            hasError={timeisnowFieldError.hasError}
+            errorMessage={errors.timeisnow.errorMessage}
+            hasError={errors.timeisnow.hasError}
             {...getOverrideProps(overrides, \\"timeisnow\\")}
           ></TextField>
         </Grid>
@@ -1252,7 +1138,7 @@ export default function InputGalleryCreateForm(props) {
             children=\\"Submit\\"
             type=\\"submit\\"
             variation=\\"primary\\"
-            isDisabled={!formValid}
+            isDisabled={Object.values(errors).some((e) => e.hasError)}
             {...getOverrideProps(overrides, \\"SubmitButton\\")}
           ></Button>
         </Flex>
diff --git a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
index defab1c76..4484fb2ff 100644
--- a/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
+++ b/packages/codegen-ui-react/lib/forms/form-renderer-helper.ts
@@ -25,6 +25,7 @@ import {
   StudioForm,
   StudioFormActionType,
 } from '@aws-amplify/codegen-ui';
+import { FieldConfigMetadata } from '@aws-amplify/codegen-ui/lib/types';
 import {
   BindingElement,
   Expression,
@@ -120,11 +121,11 @@ export const buildMutationBindings = (form: StudioForm) => {
 };
 
 /*
-  generate params in typed props
-  - datastore (onSubmitBefore(fields) & onSubmitComplete({saveSuccessful, errorMessage}))
-   - if update include id
-  - custom (onSubmit(fields))
- */
+    generate params in typed props
+    - datastore (onSubmitBefore(fields) & onSubmitComplete({saveSuccessful, errorMessage}))
+     - if update include id
+    - custom (onSubmit(fields))
+   */
 export const buildFormPropNode = (form: StudioForm) => {
   const {
     dataType: { dataSourceType },
@@ -369,28 +370,29 @@ export const addFormAttributes = (
   // then map this with the componentType
 
   /*
-    boolean => RadioGroupField
-    const value = e.target.value.toLowerCase() === 'yes';
-    boolean => selectfield
-    const value = ....
-
-
-    componentType => SelectField && boolean
-    const value = Boolean(e.target.checked)
-
-  */
-  if (component.componentType.includes('Field')) {
-    if (formMetadata && component.name in formMetadata?.fieldConfigs) {
-      const { validationRules, dataType } = formMetadata.fieldConfigs[component.name];
-      attributes.push(buildOnChangeStatement(component.name, component.componentType, validationRules, dataType));
-    }
+      boolean => RadioGroupField
+      const value = e.target.value.toLowerCase() === 'yes';
+      boolean => selectfield
+      const value = ....
+  
+  
+      componentType => SelectField && boolean
+      const value = Boolean(e.target.checked)
+  
+    */
+  if (formMetadata && component.name in formMetadata?.fieldConfigs) {
+    const { dataType } = formMetadata.fieldConfigs[component.name];
+    attributes.push(buildOnChangeStatement(component.name, component.componentType, dataType));
     attributes.push(
       factory.createJsxAttribute(
         factory.createIdentifier('errorMessage'),
         factory.createJsxExpression(
           undefined,
           factory.createPropertyAccessExpression(
-            factory.createIdentifier(`${component.name}FieldError`),
+            factory.createPropertyAccessExpression(
+              factory.createIdentifier('errors'),
+              factory.createIdentifier(component.name),
+            ),
             factory.createIdentifier('errorMessage'),
           ),
         ),
@@ -400,7 +402,10 @@ export const addFormAttributes = (
         factory.createJsxExpression(
           undefined,
           factory.createPropertyAccessExpression(
-            factory.createIdentifier(`${component.name}FieldError`),
+            factory.createPropertyAccessExpression(
+              factory.createIdentifier('errors'),
+              factory.createIdentifier(component.name),
+            ),
             factory.createIdentifier('hasError'),
           ),
         ),
@@ -414,7 +419,43 @@ export const addFormAttributes = (
         factory.createIdentifier('isDisabled'),
         factory.createJsxExpression(
           undefined,
-          factory.createPrefixUnaryExpression(SyntaxKind.ExclamationToken, factory.createIdentifier('formValid')),
+          factory.createCallExpression(
+            factory.createPropertyAccessExpression(
+              factory.createCallExpression(
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier('Object'),
+                  factory.createIdentifier('values'),
+                ),
+                undefined,
+                [factory.createIdentifier('errors')],
+              ),
+              factory.createIdentifier('some'),
+            ),
+            undefined,
+            [
+              factory.createArrowFunction(
+                undefined,
+                undefined,
+                [
+                  factory.createParameterDeclaration(
+                    undefined,
+                    undefined,
+                    undefined,
+                    factory.createIdentifier('e'),
+                    undefined,
+                    undefined,
+                    undefined,
+                  ),
+                ],
+                undefined,
+                factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier('e'),
+                  factory.createIdentifier('hasError'),
+                ),
+              ),
+            ],
+          ),
         ),
       ),
     );
@@ -451,12 +492,7 @@ export const addFormAttributes = (
   return attributes;
 };
 
-export const buildOnChangeStatement = (
-  fieldName: string,
-  fieldType: string,
-  validationRules: FieldValidationConfiguration[],
-  dataType?: DataFieldDataType,
-) => {
+export const buildOnChangeStatement = (fieldName: string, fieldType: string, dataType?: DataFieldDataType) => {
   return factory.createJsxAttribute(
     factory.createIdentifier('onChange'),
     factory.createJsxExpression(
@@ -480,68 +516,14 @@ export const buildOnChangeStatement = (
         factory.createBlock(
           [
             buildTargetVariable(fieldType, dataType),
-            factory.createVariableStatement(
-              undefined,
-              factory.createVariableDeclarationList(
-                [
-                  factory.createVariableDeclaration(
-                    factory.createIdentifier('isValidResult'),
-                    undefined,
-                    undefined,
-                    factory.createConditionalExpression(
-                      factory.createElementAccessChain(
-                        factory.createIdentifier('onValidate'),
-                        factory.createToken(SyntaxKind.QuestionDotToken),
-                        factory.createStringLiteral(fieldName),
-                      ),
-                      factory.createToken(SyntaxKind.QuestionToken),
-                      factory.createAwaitExpression(
-                        factory.createCallExpression(
-                          factory.createElementAccessExpression(
-                            factory.createIdentifier('onValidate'),
-                            factory.createStringLiteral(fieldName),
-                          ),
-                          undefined,
-                          [factory.createIdentifier('value')],
-                        ),
-                      ),
-                      factory.createToken(SyntaxKind.ColonToken),
-                      factory.createCallExpression(factory.createIdentifier('validateField'), undefined, [
-                        factory.createIdentifier('value'),
-                        createValidationExpression(validationRules),
-                      ]),
-                    ),
-                  ),
-                ],
-                NodeFlags.Const,
-              ),
-            ),
             factory.createExpressionStatement(
-              factory.createCallExpression(
-                factory.createIdentifier(`set${capitalizeFirstLetter(fieldName)}FieldError`),
-                undefined,
-                [
-                  factory.createObjectLiteralExpression(
-                    [
-                      factory.createSpreadAssignment(factory.createIdentifier(`${fieldName}FieldError`)),
-                      factory.createSpreadAssignment(factory.createIdentifier('isValidResult')),
-                    ],
-                    false,
-                  ),
-                ],
+              factory.createAwaitExpression(
+                factory.createCallExpression(factory.createIdentifier('runValidationTasks'), undefined, [
+                  factory.createStringLiteral(fieldName),
+                  factory.createIdentifier('value'),
+                ]),
               ),
             ),
-            factory.createExpressionStatement(
-              factory.createCallExpression(factory.createIdentifier('setFormValid'), undefined, [
-                factory.createPrefixUnaryExpression(
-                  SyntaxKind.ExclamationToken,
-                  factory.createPropertyAccessExpression(
-                    factory.createIdentifier(`${fieldName}FieldError`),
-                    factory.createIdentifier('hasError'),
-                  ),
-                ),
-              ]),
-            ),
             factory.createExpressionStatement(
               factory.createCallExpression(factory.createIdentifier('setModelFields'), undefined, [
                 factory.createObjectLiteralExpression(
@@ -717,3 +699,147 @@ export const buildOverrideTypesBindings = (
     ]),
   );
 };
+
+export function buildValidations(fieldConfigs: Record<string, FieldConfigMetadata>) {
+  const validationsForField = Object.entries(fieldConfigs).map(([fieldName, fieldConfig]) =>
+    factory.createPropertyAssignment(
+      factory.createIdentifier(fieldName),
+      createValidationExpression(fieldConfig.validationRules),
+    ),
+  );
+
+  return factory.createVariableStatement(
+    undefined,
+    factory.createVariableDeclarationList(
+      [
+        factory.createVariableDeclaration(
+          factory.createIdentifier('validations'),
+          undefined,
+          undefined,
+          factory.createObjectLiteralExpression(validationsForField, true),
+        ),
+      ],
+      NodeFlags.Const,
+    ),
+  );
+}
+
+/**
+      async function runValidationTasks(fieldName, value) {
+        const validationResponse = { 
+          ...validateField(value, validations[fieldName]), 
+          ...await onValidate?.[fieldName]?.(value) 
+          };
+        setErrors(errors => ({ ...errors, [fieldName]: validationResponse }));
+        return validationResponse;
+      }
+   */
+
+export const runValidationTasksFunction = factory.createFunctionDeclaration(
+  undefined,
+  [factory.createModifier(SyntaxKind.AsyncKeyword)],
+  undefined,
+  factory.createIdentifier('runValidationTasks'),
+  undefined,
+  [
+    factory.createParameterDeclaration(
+      undefined,
+      undefined,
+      undefined,
+      factory.createIdentifier('fieldName'),
+      undefined,
+      undefined,
+      undefined,
+    ),
+    factory.createParameterDeclaration(
+      undefined,
+      undefined,
+      undefined,
+      factory.createIdentifier('value'),
+      undefined,
+      undefined,
+      undefined,
+    ),
+  ],
+  undefined,
+  factory.createBlock(
+    [
+      factory.createVariableStatement(
+        undefined,
+        factory.createVariableDeclarationList(
+          [
+            factory.createVariableDeclaration(
+              factory.createIdentifier('validationResponse'),
+              undefined,
+              undefined,
+              factory.createObjectLiteralExpression(
+                [
+                  factory.createSpreadAssignment(
+                    factory.createCallExpression(factory.createIdentifier('validateField'), undefined, [
+                      factory.createIdentifier('value'),
+                      factory.createElementAccessExpression(
+                        factory.createIdentifier('validations'),
+                        factory.createIdentifier('fieldName'),
+                      ),
+                    ]),
+                  ),
+                  factory.createSpreadAssignment(
+                    factory.createAwaitExpression(
+                      factory.createCallChain(
+                        factory.createElementAccessChain(
+                          factory.createIdentifier('onValidate'),
+                          factory.createToken(SyntaxKind.QuestionDotToken),
+                          factory.createIdentifier('fieldName'),
+                        ),
+                        factory.createToken(SyntaxKind.QuestionDotToken),
+                        undefined,
+                        [factory.createIdentifier('value')],
+                      ),
+                    ),
+                  ),
+                ],
+                false,
+              ),
+            ),
+          ],
+          NodeFlags.Const,
+        ),
+      ),
+      factory.createExpressionStatement(
+        factory.createCallExpression(factory.createIdentifier('setErrors'), undefined, [
+          factory.createArrowFunction(
+            undefined,
+            undefined,
+            [
+              factory.createParameterDeclaration(
+                undefined,
+                undefined,
+                undefined,
+                factory.createIdentifier('errors'),
+                undefined,
+                undefined,
+                undefined,
+              ),
+            ],
+            undefined,
+            factory.createToken(SyntaxKind.EqualsGreaterThanToken),
+            factory.createParenthesizedExpression(
+              factory.createObjectLiteralExpression(
+                [
+                  factory.createSpreadAssignment(factory.createIdentifier('errors')),
+                  factory.createPropertyAssignment(
+                    factory.createComputedPropertyName(factory.createIdentifier('fieldName')),
+                    factory.createIdentifier('validationResponse'),
+                  ),
+                ],
+                false,
+              ),
+            ),
+          ),
+        ]),
+      ),
+      factory.createReturnStatement(factory.createIdentifier('validationResponse')),
+    ],
+    true,
+  ),
+);
diff --git a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
index ae713b387..38c521041 100644
--- a/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
+++ b/packages/codegen-ui-react/lib/forms/react-form-renderer.ts
@@ -63,6 +63,8 @@ import {
   buildMutationBindings,
   buildOverrideTypesBindings,
   buildStateMutationStatement,
+  buildValidations,
+  runValidationTasksFunction,
 } from './form-renderer-helper';
 
 export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
@@ -327,31 +329,21 @@ export abstract class ReactFormTemplateRenderer extends StudioTemplateRenderer<
         ),
       ),
     );
-    if (formMetadata && Object.keys(formMetadata.fieldConfigs).length) {
-      Object.keys(formMetadata.fieldConfigs).forEach((field) => {
-        statements.push(
-          buildStateMutationStatement(
-            `${field}FieldError`,
-            factory.createObjectLiteralExpression(
-              [
-                factory.createPropertyAssignment(factory.createIdentifier('hasError'), factory.createFalse()),
-                factory.createPropertyAssignment(
-                  factory.createIdentifier('errorMessage'),
-                  factory.createStringLiteral(''),
-                ),
-              ],
-              false,
-            ),
-          ),
-        );
-      });
-      this.importCollection.addMappedImport(ImportValue.VALIDATE_FIELD);
-    }
 
     this.importCollection.addMappedImport(ImportValue.USE_STATE_MUTATION_ACTION);
 
     statements.push(buildStateMutationStatement('modelFields', factory.createObjectLiteralExpression()));
     statements.push(buildStateMutationStatement('formValid', factory.createTrue()));
+
+    statements.push(buildStateMutationStatement('errors', factory.createObjectLiteralExpression()));
+
+    if (formMetadata) {
+      this.importCollection.addMappedImport(ImportValue.VALIDATE_FIELD);
+
+      statements.push(buildValidations(formMetadata.fieldConfigs));
+      statements.push(runValidationTasksFunction);
+    }
+
     // add model import for datastore type
     if (this.component.dataType.dataSourceType === 'DataStore') {
       this.importCollection.addImport(ImportSource.LOCAL_MODELS, this.component.dataType.dataTypeName);