Merge pull request #69 from dbssman/feature/53-add-dependencies-capability-to-field

🔀 Add field dependency capabilities

Author: dbssman

docs/api/use-form-handler/register.md

@@ -23,6 +23,7 @@ Coming soon...
 | withDetails         | `boolean`                                                            | Explicitly indicates if you want to bind dirty and and touched state for the registered field                                                                                                   |
 | disabled            | `boolean`                                                            | Disables the field. When a field is disabled it gets reset, and is not able to validate, or set new values until it is enabled again. The field is also not considered for the form validation. |
 | useNativeValidation | `boolean`                                                            | Set to true if you want to use native HTML validation                                                                                                                                           |
+| dependentFields     | `string[]`                                                           | Array of names from fields that depend on this one validation                                                                                                                                   |
 
 ## Return
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form-handler",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "author": "Dennis R. Bosmans",
@@ -64,4 +64,4 @@
     "vitest": "^0.26.1",
     "vue-tsc": "^1.0.9"
   }
-}
+}

package.json

@@ -71,4 +71,30 @@ describe('register()', () => {
     expect(values.field).toBe('error')
     expect(formState.isValid).toBeFalsy()
   })
+  it('should trigger validation on dependent field', async () => {
+    const { register, formState, setValue } = useFormHandler()
+    register('field1', {
+      dependentFields: ['field2'],
+    })
+    register('field2', {
+      required: true,
+    })
+    await setValue('field1', 'error')
+    expect(formState.isValid).toBeFalsy()
+  })
+  it('should trigger validation on multiple dependent fields', async () => {
+    const { register, formState, setValue } = useFormHandler()
+    register('field1', {
+      dependentFields: ['field2', 'field3'],
+    })
+    register('field2', {
+      required: true,
+    })
+    register('field3', {
+      required: true,
+    })
+    await setValue('field1', 'error')
+    expect(formState.errors.field2).toBeDefined()
+    expect(formState.errors.field3).toBeDefined()
+  })
 })

src/test/register.test.ts

@@ -36,6 +36,7 @@ export interface WrappedReference {
   _validations: Validations
   _disabled: boolean
   _defaultValue: any
+  _dependentFields?: string[]
 }
 
 export type Refs = Record<string, WrappedReference>

src/types/refs.ts

@@ -25,6 +25,9 @@ export interface RegisterOptions extends ValidationsConfiguration {
 
   /** Indicates if the control should use the native html validation */
   useNativeValidation?: boolean
+
+  /** Array of dependent fields */
+  dependentFields?: string[]
 }
 
 export type RegisterReturn = BaseControlProps & NativeValidations

src/types/register.ts

@@ -81,6 +81,7 @@ export const useFormHandler: UseFormHandler = ({
       },
       _defaultValue: options.defaultValue,
       _disabled: !!options.disabled,
+      _dependentFields: options.dependentFields,
     }
     if (needsReset) {
       unregister(name)
@@ -183,8 +184,9 @@ export const useFormHandler: UseFormHandler = ({
   }
 
   const setValue: SetValue = async (name, value = DEFAULT_FIELD_VALUE) => {
+    const field = _refs[name]
     if (
-      !_refs[name]?._disabled &&
+      !field?._disabled &&
       (!interceptor ||
         (await interceptor({
           clearError,
@@ -203,6 +205,13 @@ export const useFormHandler: UseFormHandler = ({
     ) {
       values[name] = value
       setDirty(name, !isEqual(value, _getInitial(name)))
+      if (field && field._dependentFields) {
+        for (const dependentField of field._dependentFields) {
+          if (_refs[dependentField]) {
+            await triggerValidation(dependentField)
+          }
+        }
+      }
       return
     }
     if (