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

В библиотеке Carbon Components Svelte обработка ошибок является важным аспектом при построении пользовательских интерфейсов, так как компоненты предоставляют встроенные механизмы для визуального отображения ошибок, состояния валидации и сообщений пользователю. Рассмотрим подходы и практические примеры использования.

Встроенные механизмы отображения ошибок

Многие компоненты Carbon, такие как TextInput, Select, NumberInput, поддерживают свойства для управления ошибками:

  • invalid — булево значение, указывающее, что компонент находится в состоянии ошибки.
  • invalidText — текст сообщения об ошибке, который отображается пользователю.
  • helperText — дополнительный текст подсказки, который может изменяться при ошибке.

Пример использования с TextInput:

 validateEmail(e.detail.value)}
/>

В этом примере:

  • hasError — булева переменная, определяемая логикой проверки валидности email.
  • invalidText автоматически появляется под полем ввода, когда invalid равен true.

Управление состоянием ошибок через Svelte

Svelte позволяет удобно связывать состояние ошибок с логикой компонента. На практике это делается с помощью реактивных переменных:

Особенность Svelte — реактивность переменной hasError позволяет автоматически обновлять состояние компонента при каждом изменении email.

Комплексная валидация форм

Для больших форм с несколькими полями можно создать объект состояния ошибок:



 { formData.name = e.detail.value; validate(); }}
/>

 { formData.age = e.detail.value; validate(); }}
/>

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

Использование состояния warn для предупреждений

Помимо ошибок, Carbon Components поддерживает состояния предупреждений:

  • warn — булево значение для активации предупреждения.
  • warnText — текст предупреждения, отображаемый под полем.

Пример:

 0}
  warnText="Пароль слишком короткий"
/>

Отличие от ошибок: предупреждения не блокируют отправку формы, а лишь информируют пользователя о потенциальных проблемах.

Настройка визуального отображения ошибок

Carbon Components Svelte используют CSS-классы, которые автоматически применяются к полям ввода:

  • .bx--text-input--invalid — добавляется к полям с ошибкой.
  • .bx--form-requirement — контейнер текста ошибки.
  • .bx--text-input__field — основное поле ввода, на которое можно наложить стили состояния.

При необходимости можно создавать кастомные стили для ошибок, чтобы соответствовать дизайн-системе проекта:

.bx--text-input--invalid {
  border-color: #da1e28;
}

.bx--form-requirement {
  color: #da1e28;
  font-size: 0.875rem;
}

Ошибки при асинхронных действиях

Для компонентов, связанных с серверными запросами (например, загрузка данных или проверка уникальности), состояние ошибки можно обновлять после получения ответа:

Использование события blur позволяет проверять данные только после того, как пользователь закончил ввод, снижая нагрузку на сервер и улучшая UX.

Интеграция с кастомными компонентами

Если создается собственный компонент на базе Carbon, обработка ошибок может быть реализована через прокидывание свойств invalid и invalidText:





  
  {#if invalid}
    
{invalidText}

  {/if}

Такой подход позволяет сохранить единообразие работы с ошибками по всему приложению.

Оглавление