Vee validate handleSubmit with invalid callback

handleSubmit.ts

import { PublicFormContext, SubmissionHandler } from "vee-validate";

export function createSubmitHandler<
  TValues extends Record<string, any> = Record<string, any>,
  TContext extends Omit<PublicFormContext<TValues>, "handleSubmit"> = Omit<
    PublicFormContext<TValues>,
    "handleSubmit"
  >
>(
  onValid: SubmissionHandler<TValues>,
  onInvalid: (
    formValues: {
      handleSubmit: (
        event: Event,
        cb: SubmissionHandler<TValues>
      ) => Promise<void>;
    } & TContext
  ) => void
): (
  event: Event,
  formValues: {
    handleSubmit: (
      event: Event,
      cb: SubmissionHandler<TValues>
    ) => Promise<void>;
  } & TContext
) => Promise<void> {
  return (event, formValues) => {
    const { promise, resolve, reject } = deffer();
    promise.catch(() => onInvalid(formValues));
    const handle: SubmissionHandler<TValues> = (...args) => (
      resolve(), onValid(...args)
    );
    return formValues.handleSubmit(event, handle).then(reject);
  };
}

type Executor<T, TErr> = {
  resolve: (value?: T) => void;
  reject: (reason?: TErr) => void;
};
function deffer<T, TError>(): { promise: Promise<T> } & Executor<T, TError> {
  let control: any;
  const promise = new Promise<T>(
    (resolve, reject) => (control = { resolve, reject })
  );
  return {
    resolve: control.resolve,
    reject: control.reject,
    promise,
  };
}

Please use this away with composition api
logaretm/vee-validate#427 (comment)