Модалки и формы в UI
Один из самых мощных принципов работы с формами - это переиспользование при похожих схемах валидации. Если логика проверки данных одинаковая, а отличается только куда и как отправлять данные, то создавайте одну форму и переиспользуйте её в разных модалках. Модалки будут отличаться только адресом API и текстом уведомлений. Это убирает дублирование кода валидации и делает поддержку в разы проще. Когда видишь одинаковую логику в двух местах, всегда стоит подумать - а можно ли вынести общее.
Еще один важный паттерн - разделение форм и модалок на отдельные компоненты. Форма отвечает только за валидацию и состояние полей, модалка - за UI модального окна и обработку результатов. Это позволяет переиспользовать формы в разных контекстах - не только в модалках, но и на страницах, в панелях, везде где нужна та же логика. Компоненты становятся более переиспользуемыми и тестируемыми.
Интересный подход к валидации - не собирать пустой объект формы при создании. Оставляйте обязательные поля undefined, чтобы валидация подсветила незаполненные значения при попытке отправки, а не сразу при загрузке формы. Дефолты задавайте только для переключателей и коллекций. А при отправке формы передавайте полный объект, а не только измененные поля. Если бэку нужен частичный апдейт, он сам проигнорирует лишние поля. Важно держать строгую валидацию, чтобы в полном объекте не уходили пустые значения.
И последнее - предпочтение явной передачи данных над глобальным состоянием. Явные зависимости улучшают читаемость кода, упрощают тестирование и обеспечивают типобезопасность. Глобальное состояние используйте только в исключительных случаях для глубоко вложенных компонентов или плагинов. #ui #модалки #формы
· 28.12.2025
Дао в том чтоб получить отдельными пере используемыми сущностями компонент модалки, компонент формы, набор компонентов с пере используемыми правилами валидации, вызывать это по месту а обработку с разными адресами проводить в родительском компоненте.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
коммент удалён
· 28.12.2025
Можно сказать, что мы оба написали об одном и том же, если я правильно понял 😎
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 28.12.2025
Я так понял что модалка завязана на урл. И обрабатывается отправка модалкой. Я же настаивал на том что по принципу единой ответственности модалка не должна отправлять что то куда то. Она должна отдать результат в родительский компонент.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён
· 28.12.2025
А, понял, получается, ваш подход - максимальная декомпозиция: модалка только отображает, форма только валидирует, родитель всё обрабатывает.
На мой взгляд, такое хорошо подходит для сложных сценариев, а для типовых - мой вариант. Но паттерн из вашего коммента классный и строгий по разделению ответственности.
Мой же больше про компонент-стратегию, условно готовый компонент «под ключ» - в нём и запрос, и уведомления, а с родителя пропсами только начальные данные приходят, например.
0
ответить
коммент скрыт — часть юзеров считает его токсичным или некорректным
ответ удалён