В нем делаешь <Form><Input/><Imput/></Form>, где форм и инпут - бутстраповская хрень

В реакте всякая мелочь выносится в компоненты для удобного рендеринга при изменениях, а во вью есть двухсторонее связывание и это не надо

можно и не вынести в компонент, а просто сделать сетстейт - и все обновится

не для этого разносится все по компонентам

а для переиспользования

и это касается не только реакта

Переиспользование-то можно делать и в цикле

Сильно зависит от того, что именно тебе надо переиспользовать

каким образом?

DRY

Если там прям много логики, то лучше вынести в компонент отдельный

я пытаюсь разнести по компонентам, чтобы 1 раз написать логику обработки валидаторов, показа прелоадера и прочего, потом просто из этих "компонентов" собрать форму, передать методы и все в итоге получить нечто подобное <v-form @submit="handleSubmit"> <v-input type="text" name="1" validators="{['isRequired', 'isEmail', (value) => {} ]}"/> <v-input type="text" name="2"/> </v-form>

Если это просто опшн в селекте, то резонно просто пройтись по данным например и вывести опшн для каждой штуки данных

чтобы вот то, что в бутстраповской доке, типо onReset (evt) { evt.preventDefault(); /* Reset our form values */ this.form.email = ''; this.form.name = ''; this.form.food = null; this.form.checked = []; /* Trick to reset/clear native browser form validation state */ this.show = false; this.$nextTick(() => { this.show = true }); } было уше зашито и не нужно было дублировать

Была. Они переехали на вью-пресс и временно пока нет. Пуллреквест как смержат вернётся

А ок. Просто ребят отправил читать доку а они не понимают))

Во вью же вроде директивы есть, чтобы валидировать всякое

Я точно не помню

Во вью же вроде директивы есть, чтобы валидировать всякое

да вариант кстати

Ну всм, можно валидировать директивами

но, мне ошибки формы надо показать только при сабмите

Есть всякие плагины типа vee-validate

Которые через директивы работают

Можно свою кастомную штуку так сделать

vee-validate работает через директивы и подсвечивает ошибки сразу, мне их надо связть с формой, чтобы при сабмите показались, а как только что-то начали менять - убралось

чтобы инпуты дизейблились если в форму передали fetching=true

и подобные штуки

но, я не понимаю как это организовывается нормально на вью

Почему при клике на сабмит нельзя валидировать форму?

onSubmit() { if (this.validate()}....}

но, я не понимаю как это организовывается нормально на вью

Сабмит. Чек ин фор всех полей. Если шляпа стопим сабмит. Подсвечиваем поле. Кастомная штука. Делается за час максимум

Сабмит. Чек ин фор всех полей. Если шляпа стопим сабмит. Подсвечиваем поле. Кастомная штука. Делается за час максимум

+1

Сабмит. Чек ин фор всех полей. Если шляпа стопим сабмит. Подсвечиваем поле. Кастомная штука. Делается за час максимум

в любом случае я прихожу к обхолду дочерних компонентов

а выше говорили что это не гуд (и вроде как это не гуд)

Сабмит. Чек ин фор всех полей. Если шляпа стопим сабмит. Подсвечиваем поле. Кастомная штука. Делается за час максимум

в продакшен сделанную за час никто не путстит, нужны еще тесты, и нормальный код (расширяемость) и пр. чтобы это работало для всего проекта

в любом случае я прихожу к обхолду дочерних компонентов

У тебя данные (что там лежит, в дочерних элементах) могут храниться в самой форме

У тебя данные (что там лежит, в дочерних элементах) могут храниться в самой форме

а валидаторы?

<Input v-model="myInput"/>

А валидатор на сабмите

А валидатор на сабмите

где их хранить я имею в виду, массив правил по каждому полю как его валидировать

типо {name:['isRequired'], email:['isEmail']}

типо {name:['isRequired'], email:['isEmail']}

Ну validate props array isNotRequired я бы передавал.

Ну validate props array isNotRequired я бы передавал.

то есть в результате что-то такое? <v-form :onSubmit="handleSubmit" :validators={{name: ['isRequired'], email:['isEmail']}}> <v-input type="text" name="name"/> <v-input type="text" name="email"/> </v-form>

то есть в результате что-то такое? <v-form :onSubmit="handleSubmit" :validators={{name: ['isRequired'], email:['isEmail']}}> <v-input type="text" name="name"/> <v-input type="text" name="email"/> </v-form>

Ну вот тут тоже грабли.М ожет возникнуть ситуация захотеть валидировать не поля. А всю форму.

то есть в результате что-то такое? <v-form :onSubmit="handleSubmit" :validators={{name: ['isRequired'], email:['isEmail']}}> <v-input type="text" name="name"/> <v-input type="text" name="email"/> </v-form>

https://pastebin.com/e4CmEwmC вот тут немного псевдокода

Я обычно так задачи вроде твоей решаю

Может быть, пригодится

Ну вот тут тоже грабли.М ожет возникнуть ситуация захотеть валидировать не поля. А всю форму.

это не будет работать еще потому, что валидация инпута - это проблема инпута и никто не должен знать как он там валидируется, и ошибка в итоге должна отобразиться внутри инпута (а что если это выпадающий календарь на несколько месяцев где ошибку надо показать над определенной датой)

Margarita спасибо

это не будет работать еще потому, что валидация инпута - это проблема инпута и никто не должен знать как он там валидируется, и ошибка в итоге должна отобразиться внутри инпута (а что если это выпадающий календарь на несколько месяцев где ошибку надо показать над определенной датой)

Это в реакте. А во вью данные инпута лежат в форме

Посмотри, у меня data, которую отображает инпут, лежит в компоненте Form

watch: { '$root.data'() { console.log('ROOT CHANGED') } }, нужно получить оповещение о том что this.$root.data изменился в компоненте, но выше указанный вариант почему-то не срабатывает, что не так?

это не будет работать еще потому, что валидация инпута - это проблема инпута и никто не должен знать как он там валидируется, и ошибка в итоге должна отобразиться внутри инпута (а что если это выпадающий календарь на несколько месяцев где ошибку надо показать над определенной датой)

Семь бед один ответ. Нужно нормальный валидатор для продакшн))) Для сделать по бырроому можно и самому накидать.

Это в реакте. А во вью данные инпута лежат в форме

Могут лежать в форме, я хотела сказать. Необязательно это. Но обычно работает.

Могут лежать в форме, я хотела сказать. Необязательно это. Но обычно работает.

ну, это не меняет того, что компонент инпута может быть очень большим и сложным (как мой пример с календарем) и его валидация тоже будет очень массивна, и, выносить это на уровень формы - странно (как минимум мне, сори я из мира реакта)

и рендер ошибки

ну, это не меняет того, что компонент инпута может быть очень большим и сложным (как мой пример с календарем) и его валидация тоже будет очень массивна, и, выносить это на уровень формы - странно (как минимум мне, сори я из мира реакта)

Все равно валидация на форме.

watch: { '$root.data'() { console.log('ROOT CHANGED') } }, нужно получить оповещение о том что this.$root.data изменился в компоненте, но выше указанный вариант почему-то не срабатывает, что не так?

Плят. this.$root и this.$parent уже сколько раз говорили плохая идея использовать.

Отправляешь ивент из своего сложного ребенка, в иненте дата

Форма валидирует дату

тогда вообще получается винегрет, валидирую на уровне формы, а потом инпуту передаю ошибку которая как-то записалась в данные формы

Плят. this.$root и this.$parent уже сколько раз говорили плохая идея использовать.

я в курсе, но мне не нужен в данном случае целый Vuex, приложение мизерное

тогда вообще получается винегрет, валидирую на уровне формы, а потом инпуту передаю ошибку которая как-то записалась в данные формы

Почему венегрет? Норм логика. Инпуту вообще похер, что ты там в него записал

Это форма может отправить или не отправить

Вообще на самом деле разные подходы можно использовать

Можно провалидировать на уровне инпута и отправить наверх месседж об ошибке

Но это для каких-то очень сложных инпутов

Я для мелких и средних проектов всегда использовала тот подход, который я уже описала и скинула псевдокод

ERROR: S client not available

ну, это не меняет того, что компонент инпута может быть очень большим и сложным (как мой пример с календарем) и его валидация тоже будет очень массивна, и, выносить это на уровень формы - странно (как минимум мне, сори я из мира реакта)

Вы правильно думаете. Компонент должен только принять правила. А как валидировать это должно быть известно ему одному. Т.е. я тоже так думаю)))

забавно выходит, 2 пути у каждого свои недостатки и плюсы)

Все норм работало и потом ничего не отваливалось и багов тоже не было

Вы правильно думаете. Компонент должен только принять правила. А как валидировать это должно быть известно ему одному. Т.е. я тоже так думаю)))

Тогда инпут сможет сразу показать, если ты ввел ерунду

А если хочется валидировать при отправке, а не сразу подсвечивать, удобнее, имхо, делать это при сабмите

Можно провалидировать на уровне инпута и отправить наверх месседж об ошибке

По-моему мы как раз об этом решении и говорим.

Неа

Парень, по-моему, хочет валидировать при отправке

Чтобы сразу не подсвечивалось

$root вообще не реактивен получается?

в какой момент показывать ошибку это не проблема инута, или формы, это проблема того когда вызывается валидация

Чтобы сразу - я уже предложила решение с директивами☺

Чтобы сразу - я уже предложила решение с директивами☺

спасибо за активность, как раз выбираю как что лучше)

в какой момент показывать ошибку это не проблема инута, или формы, это проблема того когда вызывается валидация

То есть сабмита☺

Парень, по-моему, хочет валидировать при отправке

Валидатор может вернуть тру/фолс для последующей обработке в родителе. Но фиелд подсветить с ошибкой валидации компонент должен уметь сам. Нет?

То есть сабмита☺

сабмит может быть и без валидации

Валидатор может вернуть тру/фолс для последующей обработке в родителе. Но фиелд подсветить с ошибкой валидации компонент должен уметь сам. Нет?

Вариант с ивентами, я предложила уже)

Валидатор может вернуть тру/фолс для последующей обработке в родителе. Но фиелд подсветить с ошибкой валидации компонент должен уметь сам. Нет?

А зачем?

типо с параметром no-validate, или наоборот по действию в стороннем компоненте (где-то рядом) может быть вызвана валидация типо "проверить мои данные"

Если у нас нет задачи сразу подсвечивать

Ну в общем все зависит от конкретной реализации

Вообще необязательно инпуту уметь самому подсвечивать

Смотря что вы кодите вообще.

Я написала несколько проектов, где мне требовалось в конце на сабмите или отправить данные, или вывести сообщение, что данные фиговые :)

Если кейс такой - то куда удобнее валидировать на сабмите

Если кейс сразу подсвечивать - то мне лично в этом вопросе импонируют директивы )))

А зачем?

Мы говорим про dumb инпут валидацию? Или форм ин компонент валидацию?

Мы говорим про dumb инпут валидацию? Или форм ин компонент валидацию?

Форм ин, по-моему?

Форм ин, по-моему?

Потому что если dumb инпут то он должен известить родителя об ошибке чтобы уже родитель принял решение что делать дальше.

Потому что если dumb инпут то он должен известить родителя об ошибке чтобы уже родитель принял решение что делать дальше.

Ну, да

Ну, да

то есть сама валидация все же происходит на уровне инпута)

кстати, возможность лайв-валидации можно как раз передать через директиву