useNaiveForm

This composable is intended to be used with the n-form naive-ui component. It provides state management. It's better to explain it with an example.

<template>
  <n-form
    ref="formRef"
    :rules="rules"
    :model="model"
    @submit.prevent="() => onSubmit(handleSubmit)"
  >
    <n-form-item label="Email" path="email">
      <n-input v-model:value="model.email"></n-input>
    </n-form-item>

    <n-form-item path="password" label="Password">
      <n-input v-model:value="model.password" type="password"></n-input>
    </n-form-item>

    <n-button
      attr-type="submit"
      :loading="pending"
      :disabled="pending || !edited"
    >
      Login
    </n-button>
  </n-form>
</template>

<script setup lang="ts">
const model = ref({
  email: "[email protected]",
  password: "1234",
});

// Pass the form `model`, this will take a snapshot of the initial value and compare it to its reactive value.
// The `reset` function will reset the `model` to its initial value or the value after successful submission.
// The `edited` state indicates changes relative to the initial value.
// `updateResetValue` will update the internal default value to the current model value

const {
  formRef,
  rules,
  pending,
  apiErrors,
  onSubmit,
  edited,
  reset,
  updateResetValue,
} = useNaiveForm(model);

// ApiErrors are reactive Record<string, boolean>.
// It should be set on `handleSubmit` and checked on `rules` validators.

// First `onSubmit` will run form validation for client-side errors,
// Then calls `handleSubmit` to perform fetch request.
// Finally will re-run validation for server-side errors (ApiErrors).
// `pending` state is set during this process.

apiErrors.value = { wrongCredentials: false };

rules.value = {
  email: [
    {
      required: true,
    },
    {
      message: "Wrong credentials",
      validator: () => !apiErrors.value.wrongCredentials,
    },
  ],
  password: [
    {
      required: true,
    },
  ],
};

async function handleSubmit() {
  const { error } = await login(model.value);

  if (error.value) {
    apiErrors.value.wrongCredentials =
      error.value.message === "wrong-credentials";
  }
}
</script>