Реагировать на многошаговую отправку и проверку формы - PullRequest
Новая
       6

Реагировать на многошаговую отправку и проверку формы

0 голосов
/ 19 сентября 2019

Итак, у меня есть форма внутри главной страницы, где она будет отображать другое текстовое поле, или радио-блок, или средство выбора даты, и т. Д. При каждом нажатии следующей кнопки и кнопки «Назад» она будет либо переходить к следующему компоненту, либо к предыдущему.компонента и сохраните всю форму.

Представьте, что модель данных будет выглядеть следующим образом: {field: [{textbox1: texbox1value}, {datepicker1: datepicker1value}]

Учитывая псевдокод, более или менее похожийthis.

ContainerPage.ts 

<form>
   renderComponent(listOfComponent) // this will switch based on the link
   <button back>
   <button next>
</form>

Component1.ts 

<input textbox>

Component2.ts 

<input datepicker>

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

Я более или менее слежу за этим сайтом, но у него нет проверок https://css -триков.com / the-magic-of-response-based-multi-step-forms /

Я также видел, как какой-то сайт разрабатывает его таким образом, что форма находится на каждом компоненте, а не на главной странице.,но в итоге использовали 1 форму.

1 Ответ

0 голосов
/ 19 сентября 2019

Есть несколько способов справиться с этим.Мой любимый способ - добавить функцию обратного вызова к компоненту формы, которая будет вызываться при изменении проверки формы.Поэтому вам никогда не нужно проверять валидацию формы извне компонента, и везде, где вам нужна эта форма, вы получаете состояние валидации.

Посмотрите на этот пример https://codesandbox.io/s/charming-glitter-10db0

здесь у нас естьдва компонента App и Form Form: Здесь мы обрабатываем все поля и проверки App: Здесь мы получили обратный вызов состояния проверки, и мы можем напечатать сообщение об ошибке или отключить кнопки

...