Работа с ошибками

Обработка ошибок

Используя ValidationField

Для работы с ошибками в данных дефолтного слота присутствуют поля errors, firstError, invalid, setError для работы с ошибками

TIP

Подробное описание и тип данных можно посмотреть тут

<template>
  <validation-field name="firstName">
    <template #default="{ modelValue, onChange, errors, invalid, setError }">
      <div>
        <input
          :value="modelValue"
          type="text"
          @input="onChange($event.target.value)"
        >
        <template v-if="invalid">
          <span
            v-for="(error, index) in errors"
            :key="index"
          >
            {{ error.message }}
          </span>
        </template>
        <button
          type="button"
          @click="setError({ message: 'custom error message' })"
        >
          set custom error
        </button>
      </div>
    </template>
  </validation-field>
</template>

Используя ValidationProvider

Для работы с ошибками в данных дефолтного слота присутствуют поля errors, invalid, setError для работы с ошибками

TIP

Подробное описание и тип данных можно посмотреть тут

<template>
  <validation-provider>
    <template #default="{ errors, invalid, setError }">
      <div>
        <div>{{ invalid }}</div>
        <div>{{ errors }}</div>
        <button
          type="button"
          @click="setError('fieldName', { message: 'custom error message' })"
        >
          set custom error
        </button>
      </div>
    </template>
  </validation-provider>
</template>

Используя ValidationErrors

Для работы с ошибками в данных дефолтного слота присутствуют поля errors, submitted для работы с ошибками

TIP

Подробное описание и тип данных можно посмотреть тут

<template>
  <validation-errors name="firstName">
    <template #default="{ errors, submitted }">
      <div>
        <div>{{ submitted }}</div>
        <div>{{ errors }}</div>
      </div>
    </template>
  </validation-errors>
</template>

Входной параметр name является не обязательным и может быть опущен, тогда будут возвращены все ошибки формы

WARNING

Ошибки устанавливаемые через setError сбрасываются при изменении поля или при отправке формы

Установка серверных ошибок

После прохождения клиентской валидации выкидывается событие submit и в него приходят, помимо values, дополнительные методы. Один из них setError с помощью, которого можно так же установить ошибки, после выполнения какой-либо логики.

TIP

Подробнее о всех параметрах события submit можно ознакомится тут

<template>
  <validation-provider @submit="onSubmit">
    //...
  </validation-provider>
</template>

<script>
export default {
  methods: {
    onSubmit(values, { setError }) {
      formApi.send(values).catch((error) => {
        setError('firstName', { message: error, type: 'custom' });
      })
    }
  }
}
</script>

Ошибки по-умолчанию

ValidationProvider поддерживает передачу ошибок по-умолчанию через параметр defaultErrors

TIP

При наличии ошибок по-умолчанию переводит ValidationProvider в вариант со параметром instantValidate, то есть отображает ошибки сразу же без необходимости отправлять форму

Типы ошибок

Ошибки представляют собой следующий формат

Как видно из типа ошибки, помимо message может быть передан type ошибки. Поле type используется только для ваших личных целей, вы можете устанавливать любое нужное для вас значение. Типы могут быть использованы для какой-то логики группирования или отображения ошибок