diff --git a/packages/core/src/useFormField/useFormField.ts b/packages/core/src/useFormField/useFormField.ts index 2b8088b5..7186b0c9 100644 --- a/packages/core/src/useFormField/useFormField.ts +++ b/packages/core/src/useFormField/useFormField.ts @@ -26,6 +26,8 @@ export type FormField = { isDisabled: Ref; errors: Ref; errorMessage: Ref; + submitErrors: Ref; + submitErrorMessage: Ref; schema: StandardSchema | undefined; validate(mutate?: boolean): Promise; getPath: Getter; @@ -50,6 +52,11 @@ export function useFormField(opts?: Partial { @@ -126,6 +133,8 @@ export function useFormField(opts?: Partial(opts?: Partial { setTouched(true); + + allowStoreSubmitErrors.value = true; + }); + + form?.onValidationDone(() => { + onFieldSubmitted(errors.value, errorMessage.value); }); tryOnScopeDispose(() => { @@ -201,6 +216,29 @@ function useFieldValidity(getPath: Getter, isDisabled: Ref(errors); + const submitErrorMessage = shallowRef(errorMessage); + + const onFieldSubmitted = (errors: string[], errorMessage: string | undefined) => { + if (!allowStoreSubmitErrors.value) { + return; + } + + submitErrors.value = errors; + submitErrorMessage.value = errorMessage; + allowStoreSubmitErrors.value = false; + }; + + return { + allowStoreSubmitErrors, + submitErrors, + submitErrorMessage, + onFieldSubmitted, + }; +} + function useFieldValue( getPath: Getter, form?: FormContext | null, @@ -372,7 +410,14 @@ export type ExposedField = { * The errors for the field. */ errors: Ref; - + /** + * The errors for the field when submitting. + */ + submitErrors: Ref; + /** + * The error message for the field when submitting. + */ + submitErrorMessage: Ref; /** * The value of the field. */ @@ -422,6 +467,8 @@ export function exposeField( displayError: field.displayError, errorMessage: field.errorMessage, errors: field.errors, + submitErrors: field.submitErrors, + submitErrorMessage: field.submitErrorMessage, fieldValue: field.fieldValue as Ref, isDirty: field.isDirty, isTouched: field.isTouched,