In this tutorial, we’ll build a donations platform using the Formik FieldArray form with React and Yup for validation.

In order to validate our forms, we will use Yup with Formik validationSchema.
We show how to validate fields inside a FieldArray. We will also do a validation where we have to sum all the fields of an array.

In order to add a nice look and feel to our form, we will use Material-UI

We will use Formik with typescript.

Github Repository: https://github.com/bmvantunes/youtube-2021-jan-field-array-formik

Timeline:

• 00:00 Introduction to FieldArray + Show the final application we will get at the end of the video
• 02:17 Creating the form with all the fields, except FieldArray fields
• 11:53 Style the form using Material-UI
• 13:23 Add validation using Yup validationSchema - No validation for FieldArray fields yet
• 20:09 Explaining how the FieldArray works
• 23:15 Add FieldArray Formik component into our form
• 32:07 Style the field array using Material-UI
• 35:55 Add basic validation to FieldArray using Yup validationSchema
• 40:16 Add complex validation for the 100% percentage sum ValidationError using Yup validationSchema
• 46:50 Add ValidationError for custom error messages
• 49:50 Make all buttons disabled during submit
• 53:05 Conclusion

#react #javascript #web-development