formMachine.js

// You can preview it on https://statecharts.github.io/xstate-viz/

const formMachine = Machine({
  id: "form",
  context: {
    initialValues: {},
    values: {},
    touched: {},
    errors: {},
    submitCount: 0,
    validate: () => Promise.reject(new Error("No validate function provided")),
    submit: () => Promise.reject(new Error("No submit function provided"))
  },
  initial: "idle",
  states: {
    idle: {
      on: {
        CHANGE: {
          actions: "setValue"
        },
        BLUR: {
          actions: "touch"
        },
        SUBMIT: {
          target: "validating",
          actions: "incSubmitCount"
        },
        RESET: {
          actions: "reset"
        }
      }
    },
    validating: {
      invoke: {
        src: "validate",
        onDone: {
          target: "submitting",
          actions: "resetErrors"
        },
        onError: {
          target: "idle",
          actions: "setErrors"
        }
      }
    },
    submitting: {
      invoke: {
        src: "submit",
        onDone: {
          target: "idle"
        },
        onError: {
          target: "idle"
        }
      }
    }
  }
})