Модалки и формы в UI

Один из самых мощных принципов работы с формами - это переиспользование при похожих схемах валидации. Если логика проверки данных одинаковая, а отличается только куда и как отправлять данные, то создавайте одну форму и переиспользуйте её в разных модалках. Модалки будут отличаться только адресом API и текстом уведомлений. Это убирает дублирование кода валидации и делает поддержку в разы проще. Когда видишь одинаковую логику в двух местах, всегда стоит подумать - а можно ли вынести общее.

Еще один важный паттерн - разделение форм и модалок на отдельные компоненты. Форма отвечает только за валидацию и состояние полей, модалка - за UI модального окна и обработку результатов. Это позволяет переиспользовать формы в разных контекстах - не только в модалках, но и на страницах, в панелях, везде где нужна та же логика. Компоненты становятся более переиспользуемыми и тестируемыми.

Интересный подход к валидации - не собирать пустой объект формы при создании. Оставляйте обязательные поля undefined, чтобы валидация подсветила незаполненные значения при попытке отправки, а не сразу при загрузке формы. Дефолты задавайте только для переключателей и коллекций. А при отправке формы передавайте полный объект, а не только измененные поля. Если бэку нужен частичный апдейт, он сам проигнорирует лишние поля. Важно держать строгую валидацию, чтобы в полном объекте не уходили пустые значения.

И последнее - предпочтение явной передачи данных над глобальным состоянием. Явные зависимости улучшают читаемость кода, упрощают тестирование и обеспечивают типобезопасность. Глобальное состояние используйте только в исключительных случаях для глубоко вложенных компонентов или плагинов. #ui #модалки #формы

Модалки и формы в UI | Сетка — социальная сеть от hh.ru