Ionic React JS: React Hook Form Multi-Step Form/ Form Wizard with IonSlides

Ionic React JS: React Hook Form Multi-Step Form/ Form Wizard with IonSlides
#react #ionic #reacthookform

Create a multi-step form using React Hook Form and Ionic Framework React JS Components. I am using react hook form because I think it is a great library for managing forms and form validation. Ionic Framework IonSlides are a great container and user interface element for presenting the content to the user.

💥 Chapters
-----------------------------------
00:00 Introduction
00:34 - What We are building / Demo
02:10 - Coding - Setting Up the Slides
04:20 - Accessing Slide Object to call methods, turning off swiping
06:26 - Add buttons to change slides
16:06 - Adding React-Hook-Forms / Display Verification Errors
23:10 - Validating before going to next step
26:27 - Display final form data on submit
27:44 - Refactor Slides into Separate components
30:38 - Using React Hook Form FormProvider and useFormContext
32:48 - Refactor the rest of the slides
34:12 - Put form components in separate files
38:30 - Using the ErrorMessage Component
42:06 - Custom validation make sure the two password match
47:50 - Remove the autofill from the form
49:10 - Wrap up

💥 Links
-----------------------------------

💥 Additional Content
-----------------------------------

💥 Social Media
-------------------------

#ionicframework #reactjs

-~-~~-~~~-~~-~-
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
-~-~~-~~~-~~-~-

[AaronSaundersCI]

💥 Chapters

00:00​ Introduction
00:34​ - What We are building / Demo
02:10​ - Coding - Setting Up the Slides
04:20​ - Accessing Slide Object to call methods, turning off swiping
06:26​ - Add buttons to change slides
16:06​ - Adding React-Hook-Forms / Display Verification Errors
23:10​ - Validating before going to next step
26:27​ - Display final form data on submit
27:44​ - Refactor Slides into Separate components
30:38​ - Using React Hook Form FormProvider and useFormContext
32:48​ - Refactor the rest of the slides
34:12​ - Put form components in separate files
38:30​ - Using the ErrorMessage Component
42:06​ - Custom validation make sure the two password match
47:50​ - Remove the autofill from the form
49:10​ - Wrap up

[mickael]

Best way to explain a Stepper. Thank you very much.

[luanjfs]

Amazing, the trigger one help me a lot, thanks!

[sovereign_data]

Looking forward to your React based Ionic courses on Udemy Aaron. I love Vue, I really do, but Vue communities half hearted embrace of Typescript leaves me sad, where as React community has really embraced it. cheers

[talhademirel]

Hey Aaron, How can you give dynamic values ​​to the next method? For example I have a select field and I choose a field and its content should be passed on to the next slider with next. Would be great if you had an idea :) Thx <3

[kid_rz]

sir. how to update apk or versioning app. with ionic vue