React Multi-Step Form Tutorial: Verwenden von Formik, Yup und material-ui

Blog

React Multi-Step Form Tutorial: Verwenden von Formik, Yup und material-ui

In diesem Tutorial erstellen wir ein mehrstufiges Formular mit React, Formik und Yup zur Validierung.

Um unsere Formulare zu validieren, verwenden wir Yup mit dem Formik-Validierungsschema.
Wir zeigen, wie Felder, die von anderen Feldern abhängig sind, in verschiedenen Schritten des Formulars validiert werden.

Um unserem Formular ein schönes Aussehen und Gefühl zu verleihen, verwenden wir die Material-UI-Stepper-Komponente, um anzuzeigen, in welchem ​​​​Schritt wir uns gerade befinden.

Wir werden Formik mit Typoskript verwenden.

netflix/tv8 Code eingeben

Zeitleiste:

  • 00:00 Zeigen Sie die endgültige mehrstufige Form an, die wir am Ende des Videos erreichen werden
  • 01:30 Zeigen Sie das Repository mit dem Code für Leute, die mitmachen möchten
  • 01:44 Formular mit allen Feldern erstellen, aber ohne Schritte
  • 06:35 Validierung mit Yup hinzufügen - wir haben eine Feldvalidierung abhängig von einem anderen Feld
  • 09:45 Fügen Sie dem Formular mehrere Schritte hinzu
  • 16:26 Schaltfläche Zurück und Weiter erstellen, um durch die Schritte zu navigieren
  • 21:00 Füge die Eigenschaft „validationSchema“ für jeden Schritt hinzu, anstatt auf der obersten Ebene von Formik
  • 29:15 Verbessern Sie das Aussehen und Verhalten von Formularen (Design) mit Material-UI Box und Grid
  • 32:50 Füge Material-ui Stepper-Komponente hinzu, um zu zeigen, in welchem ​​​​Schritt wir uns gerade befinden
  • 38:04 Deaktivieren Sie die Schaltfläche Zurück und Senden, während das Formular gesendet wird
  • 42:13 Fügen Sie dem letzten Schritt ein Häkchen/Häkchen hinzu, wenn das Senden abgeschlossen ist. Fügen Sie beim Senden einen Drehknopf zum Senden hinzu.
  • 47:40 Video-Fazit
  • 47:53 Das Ende!

Github-Repository: https://github.com/bmvantunes/youtube-2020-june-multi-step-form-formik

#reagieren #javascript #web-entwicklung #programmierung #entwickler

www.youtube.com

React Multi-Step Form Tutorial: Verwenden von Formik, Yup und material-ui

In diesem React Multi-Step Form-Tutorial erstellen wir ein mehrstufiges Formular mit React, Formik und Yup zur Validierung. Um unsere Formulare zu validieren, verwenden wir Yup mit dem Formik-Validierungsschema. Wir zeigen, wie Felder, die von anderen Feldern abhängig sind, in verschiedenen Schritten des Formulars validiert werden.