Nc fix(nc-gui): Hide pre-filled fields form submit issue (#9182)

* fix(nc-gui): prefilled hidden field form submit issue

* fix(nc-gui): filter undefined validation fields

* fix(nc-gui): use optional chaining while accessing nested object

* fix(nc-gui): pr review changes

* chore(nc-gui): lint

packages/nc-gui/components/smartsheet/Form.vue

@@ -199,8 +199,14 @@ async function submitForm() {
   }
 
   try {
-    await validate(Object.keys(formState.value).map((title) => fieldMappings.value[title]))
+    await validate(
+      Object.keys(formState.value)
+        .map((title) => fieldMappings.value[title])
+        .filter((v) => v !== undefined),
+    )
   } catch (e: any) {
+    console.error(e)
+
     if (e?.errorFields?.length) {
       message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty'))
       return
@@ -587,7 +593,11 @@ watch(
     updatePreFillFormSearchParams()
 
     try {
-      await validate(Object.keys(formState.value).map((title) => fieldMappings.value[title]))
+      await validate(
+        Object.keys(formState.value)
+          .map((title) => fieldMappings.value[title])
+          .filter((v) => v !== undefined),
+      )
     } catch {}
   },
   {

packages/nc-gui/composables/useFormViewStore.ts

@@ -104,6 +104,11 @@ const [useProvideFormViewStore, useFormViewStore] = useInjectionState(
     const validateActiveField = async (col: ColumnType) => {
       if (!col.title) return
 
+      if (fieldMappings.value[col.title] === undefined) {
+        console.warn('Missing mapping field for:', col.title)
+        return
+      }
+
       try {
         await validate(fieldMappings.value[col.title])
       } catch {}

packages/nc-gui/composables/useSharedFormViewStore.ts

@@ -279,13 +279,18 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     handleAddMissingRequiredFieldDefaultState()
 
     try {
-      await validate([
+      // filter `undefined` keys which is hidden prefilled fields
+      await validate(
+        [
           ...Object.keys(formState.value).map((title) => fieldMappings.value[title]),
           ...Object.keys(additionalState.value).map((title) => fieldMappings.value[title]),
-      ])
+        ].filter((v) => v !== undefined),
+      )
       return true
     } catch (e: any) {
-      if (e.errorFields.length) {
+      console.error('Error occurred while validating all fields:', e)
+
+      if (e?.errorFields?.length) {
         message.error(t('msg.error.someOfTheRequiredFieldsAreEmpty'))
         return false
       }
@@ -325,7 +330,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       submitted.value = true
       progress.value = false
     } catch (e: any) {
-      console.log(e)
+      console.error(e)
       await message.error(await extractSdkResponseErrorMsg(e))
     }
     progress.value = false
@@ -643,7 +648,11 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     additionalState,
     async () => {
       try {
-        await validate(Object.keys(additionalState.value).map((title) => fieldMappings.value[title]))
+        await validate(
+          Object.keys(additionalState.value)
+            .map((title) => fieldMappings.value[title])
+            .filter((v) => v !== undefined),
+        )
       } catch {}
     },
     {

packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue

@@ -79,6 +79,21 @@ const onDecode = async (scannedCodeValue: string) => {
     console.error(error)
   }
 }
+
+const validateField = async (title: string) => {
+  if (fieldMappings.value[title] === undefined) {
+    console.warn('Missing mapping field for:', title)
+    return false
+  }
+
+  try {
+    await validate(fieldMappings.value[title])
+
+    return true
+  } catch (_e: any) {
+    return false
+  }
+}
 </script>
 
 <template>
@@ -232,7 +247,7 @@ const onDecode = async (scannedCodeValue: string) => {
                               :read-only="field?.read_only"
                               @update:model-value="
                                 () => {
-                                  validate(fieldMappings[field.title])
+                                  validateField(field.title)
                                 }
                               "
                             />

packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

@@ -111,6 +111,11 @@ function animate(target: AnimationTarget) {
 }
 
 const validateField = async (title: string) => {
+  if (fieldMappings.value[title] === undefined) {
+    console.warn('Missing mapping field for:', title)
+    return false
+  }
+
   try {
     await validate(fieldMappings.value[title])