How do you implement cross-field (form-level) validation and handle submission in TanStack Form?

Form-level validators receive the entire form value, enabling rules like 'password must match confirmPassword'. The onSubmit callback exposes formApi to reset or set field errors programmatically after a server response.

<script setup lang="ts">
import { useForm } from "@tanstack/vue-form"

const form=useForm({
  defaultValues: { password:"", confirm:"" },
  validators:{
    onSubmit: ({ value })=>{
      if(value.password!==value.confirm) return "Passwords do not match"
      return undefined
    },
  },
  onSubmit: async ({ value, formApi })=>{
    try{
      await registerUser(value)
      formApi.reset()
    } catch(err){
      formApi.setFieldMeta("confirm", meta=>({...meta, errors:["Server error: try again"]}))
    }
  },
})
</script>
<template>
  <form @submit.prevent="form.handleSubmit()">
    <p v-if="form.state.errors.length" class="form-error">
      {{ form.state.errors[0] }}
    </p>
    <!-- ...fields... -->
    <button type="submit" :disabled="form.state.isSubmitting">Register</button>
  </form>
</template>