feat(FormGroup): add eager validation (#992)

src/runtime/components/forms/FormGroup.vue

@@ -94,6 +94,10 @@ export default defineComponent({
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
+    },
+    eagerValidation: {
+      type: Boolean,
+      default: false
     }
   },
   setup (props) {
@@ -114,7 +118,8 @@ export default defineComponent({
       error,
       inputId,
       name: computed(() => props.name),
-      size: computed(() => props.size)
+      size: computed(() => props.size),
+      eagerValidation: computed(() => props.eagerValidation)
     })
 
     return {

src/runtime/composables/useFormGroup.ts

@@ -9,6 +9,7 @@ type InputProps = {
   color?: string
   name?: string
   isFieldset?: boolean
+  eagerValidation?: boolean
 }
 
 export const useFormGroup = (inputProps?: InputProps, config?: any) => {
@@ -49,7 +50,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     }
 
     const emitFormInput = useDebounceFn(() => {
-      if (blurred.value) {
+      if (blurred.value || formGroup?.eagerValidation.value) {
         emitFormEvent('input', formGroup?.name.value)
       }
     }, 300)

src/runtime/types/form.d.ts

@@ -32,4 +32,5 @@ export interface InjectedFormGroupValue {
   name: Ref<string>
   size: Ref<string | number | symbol>
   error: Ref<string | boolean>
+  eagerValidation: Ref<boolean>
 }