Merge pull request #24 from wisemen-digital/feature/on-submit-error

feature: on submit error

Author: wouterlms

package.json

@@ -1,7 +1,7 @@
 {
   "name": "formango",
   "type": "module",
-  "version": "2.0.28",
+  "version": "2.0.30",
   "packageManager": "[email protected]",
   "description": "",
   "author": "Wouter Laermans <[email protected]>",

src/lib/useForm.ts

@@ -12,14 +12,25 @@ interface UseFormReturnType<TSchema extends z.ZodType> {
    * @param data The current form data.
    */
   onSubmitForm: (cb: (data: z.infer<TSchema>) => void) => void
+  /**
+   * Called when the form is attempted to be submitted, but is invalid.
+   * Only called for client-side validation.
+   */
+  onSubmitFormError: (cb: () => void) => void
   /**
    * The form instance itself.
    */
   form: Form<TSchema>
 }
 
 interface UseFormOptions<TSchema extends z.ZodType> {
+  /**
+   * The zod schema of the form.
+   */
   schema: TSchema
+  /**
+   * The initial state of the form
+   */
   initialState?: MaybeRefOrGetter<NullableKeys<z.infer<TSchema>>>
 }
 
@@ -41,6 +52,7 @@ export function useForm<TSchema extends z.ZodType>(
   const errors = ref<z.ZodFormattedError<TSchema>>({} as z.ZodFormattedError<TSchema>)
 
   let onSubmitCb: ((data: z.infer<TSchema>) => MaybePromise<void>) | null = null
+  let onSubmitFormErrorCb: (() => void) | undefined
 
   const isSubmitting = ref<boolean>(false)
   const hasAttemptedToSubmit = ref<boolean>(false)
@@ -422,10 +434,18 @@ export function useForm<TSchema extends z.ZodType>(
 
     // Check if the field is already registered
     if (existingId !== null) {
-      const field = registeredFields.get(existingId) ?? null
+      let field = registeredFields.get(existingId) ?? null
 
-      if (field === null)
-        throw new Error(`${path} is already registered as a field array`)
+      if (field === null) {
+        const value = get(form, path)
+        field = createField(existingId, path, value)
+      }
+
+      // Check if value of the field is null or empty array, if so, set default value
+      const isEmpty = field.modelValue === null || (Array.isArray(field.modelValue) && field.modelValue.length === 0)
+
+      if (isEmpty && defaultValue !== undefined)
+        field.setValue(clonedDefaultValue)
 
       // If it is, check if it is still being tracked
       const existingTrackedDependency = getIsTrackedbyId(trackedDepencies, existingId)
@@ -473,10 +493,12 @@ export function useForm<TSchema extends z.ZodType>(
     // Check if the field is already registered
     if (existingId !== null) {
       // Check if it is registered as a field array
-      const fieldArray = registeredFieldArrays.get(existingId) ?? null
+      let fieldArray = registeredFieldArrays.get(existingId) ?? null
 
-      if (fieldArray === null)
-        throw new Error(`${path} is already registered as a field`)
+      if (fieldArray === null) {
+        const value = get(form, path)
+        fieldArray = createFieldArray(existingId, path, value ?? [])
+      }
 
       // Check if it is still being tracked
       const existingTrackedDependency = getIsTrackedbyId(trackedDepencies, existingId)
@@ -554,8 +576,10 @@ export function useForm<TSchema extends z.ZodType>(
 
     blurAll()
 
-    if (!isValid.value)
+    if (!isValid.value) {
+      onSubmitFormErrorCb?.()
       return
+    }
 
     // We need to keep track of the current form state, because the form might change while submitting
     const currentFormState = deepClone(form)
@@ -642,5 +666,8 @@ export function useForm<TSchema extends z.ZodType>(
     onSubmitForm: (cb: (data: z.infer<TSchema>) => MaybePromise<void>) => {
       onSubmitCb = cb
     },
+    onSubmitFormError: (cb: () => void) => {
+      onSubmitFormErrorCb = cb
+    },
   }
 }

test/useForm.test.ts

@@ -20,6 +20,10 @@ const basicArraySchema = z.object({
   array: z.array(z.string()),
 })
 
+const basic2DArraySchema = z.object({
+  array: z.array(z.array(z.string())),
+})
+
 const objectArraySchema = z.object({
   array: z.array(
     z.object({
@@ -234,6 +238,92 @@ describe('useForm', () => {
 		    ],
 		  })
     })
+
+    it('should register a field as a fieldArray', () => {
+      const { form } = useForm({
+        schema: basicArraySchema,
+      })
+
+      const arrayAsField = form.register('array', ['John'])
+      const arrayAsArray = form.registerArray('array')
+
+      expect(form.state).toEqual({
+        array: ['John'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['John'])
+      expect(arrayAsArray.modelValue).toEqual(['John'])
+
+      arrayAsField.setValue(['Doe'])
+
+      expect(form.state).toEqual({
+        array: ['Doe'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['Doe'])
+      expect(arrayAsArray.modelValue).toEqual(['Doe'])
+
+      arrayAsArray.append('John')
+
+      expect(form.state).toEqual({
+        array: ['Doe', 'John'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['Doe', 'John'])
+      expect(arrayAsArray.modelValue).toEqual(['Doe', 'John'])
+    })
+
+    it('should register a fieldArray as a field', () => {
+      const { form } = useForm({
+        schema: basicArraySchema,
+      })
+
+      const arrayAsArray = form.registerArray('array', ['John'])
+      const arrayAsField = form.register('array')
+
+      expect(form.state).toEqual({
+        array: ['John'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['John'])
+      expect(arrayAsArray.modelValue).toEqual(['John'])
+
+      arrayAsField.setValue(['Doe'])
+
+      expect(form.state).toEqual({
+        array: ['Doe'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['Doe'])
+      expect(arrayAsArray.modelValue).toEqual(['Doe'])
+
+      arrayAsArray.append('John')
+
+      expect(form.state).toEqual({
+        array: ['Doe', 'John'],
+      })
+
+      expect(arrayAsField.modelValue).toEqual(['Doe', 'John'])
+      expect(arrayAsArray.modelValue).toEqual(['Doe', 'John'])
+    })
+
+    it('should register a 2D array field with a default value', () => {
+      const { form } = useForm({
+        schema: basic2DArraySchema,
+      })
+
+      const array = form.registerArray('array', [[]])
+
+      expect(array.modelValue).toEqual([[]])
+
+      expect(form.state).toEqual({
+        array: [[]],
+      })
+
+      array.register('0', ['John'])
+
+      expect(array.modelValue).toEqual([['John']])
+    })
   })
 
   describe('unregister a field or fieldArray', () => {
@@ -436,6 +526,8 @@ describe('useForm', () => {
 
       const array = form.registerArray('array')
 
+      array.register('0')
+
       array.remove(1)
 
       expect(form.state).toEqual({
@@ -873,6 +965,25 @@ describe('useForm', () => {
 
       expect(submitted).toEqual(false)
     })
+
+    it('should call `onSubmitError` if there are errors', async () => {
+      let isCalled = false
+
+      const { form, onSubmitFormError } = useForm({
+        schema: basicSchema,
+      })
+
+      onSubmitFormError(() => {
+        isCalled = true
+      })
+
+      form.register('name', 'Jon')
+
+      await sleep(0)
+      await form.submit()
+
+      expect(isCalled).toEqual(true)
+    })
   })
 
   describe('reactive initial state', () => {