React Multi-Step Form Tutorial: Using Formik, Yup and material-ui
In this tutorial, we'll build a multi-step form using React, Formik and Yup for validation.
In order to validate our forms, we will use Yup with Formik validationSchema.
We show how to validate fields that depend on other fields in different steps of the form.
In order to add a nice look and feel to our form, we will use Material-UI stepper component in order to display in which step we are at the moment.
We will use Formik with typescript.
----
Deployed Demo: http://youtube-2020-june-multi-step-f...
Learn how to Unit-Test this form: • Testing React Forms - React Testing L...
GitHub Repository: https://github.com/bmvantunes/youtube...
Formik Tutorial Video: Formik Tutorial Playlist: • Formik Tutorial
React.js Tutorial Playlist: • React.js Tutorial with Hooks and Type...
----
Timeline:
00:00 Show the final multi-step form we will achieve at the end of the video
01:30 Show the repository with the code for people that want to follow along
01:44 Creating the form with all the fields, but without any steps
06:35 Add validation using Yup - we have a field validation depending on another field
09:45 Add multiple steps to the form
16:26 Create back and next button to "navigate" the steps
21:00 Add validationSchema property for each step, instead of at the Formik top level
29:15 Improve form look and feel (design) using Material-ui Box and Grid
32:50 Add Material-ui Stepper component to show in which step we are currently
38:04 Disable back and submit button while the form is submitting
42:13 Add a tick/check to the last step when submit is finished. Add a spinner to submit button while submitting.
47:40 Video conclusion
47:53 The End!
----
Follow me on:
Twitter: / bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: / bmvantunes
Смотрите видео React Multi-Step Form Tutorial: Using Formik, Yup and material-ui онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Bruno Antunes 08 Июнь 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 107,321 раз и оно понравилось 2.1 тысяч людям.