Form: Formik V2

Formik².2.9, formik-material-ui³.0.1, React¹⁷.0.2, Material UI⁴.11, Created at July 21, 2021, Read Series…

You need Formik for class components, because react-hook-form only support function component. You also need yup for validation.

npm install formik formik-material-ui
npm install -S yup

Example in src/features/forms/FormikForm.tsx

[Try to understand] useForm, yup, formik
[Try to understand] validationSchema definition and usage in return (…)
[Try to understand] find password in following code as an example.
[Try to understand] value={…}, and onChange={formik.handleChange} in TextField, on how to bind a field to UI component
[Try to understand] error={…} and helperText={…} to find out difference between error and helperText.
[Try to understand] onSubmit={formik.handleSubmit}, onSubmit and <Button type=”submit”/> on how to submit html form.

import React from 'react';
import { makeStyles } from '@material-ui/core';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { useFormik } from 'formik';
import * as yup from 'yup';
const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: theme.spacing(2),'& .MuiTextField-root': {
      margin: theme.spacing(1),
      width: '300px',
    },
    '& .MuiButtonBase-root': {
      margin: theme.spacing(2),
    },
  },
}));
const validationSchema = yup.object({
  firstName: yup
    .string()
    .required('First Name is required'),
  lastName: yup
    .string()
    .required('Last Name is required'),
  email: yup
    .string()
    .email('Enter a valid email')
    .required('Email is required'),
  password: yup
    .string()
    .required('Please Enter your password')
    .matches(
      /^(?=.*\d)(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z]).{8,}$/,
      "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character"
    ),
});
export default function FormikForm(): JSX.Element {
  const classes = useStyles();const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  const handleClose = (data: any) => {
    console.log(data);
  }
  return (
    <form className={classes.root} onSubmit={formik.handleSubmit}>
      <TextField
        fullWidth
        id="firstName"
        name="firstName"
        label="First Name"
        value={formik.values.firstName}
        onChange={formik.handleChange}
        error={formik.touched.firstName && Boolean(formik.errors.firstName)}
        helperText={formik.touched.firstName && formik.errors.firstName}
      />
      <TextField
        fullWidth
        id="lastName"
        name="lastName"
        label="Last Name"
        value={formik.values.lastName}
        onChange={formik.handleChange}
        error={formik.touched.lastName && Boolean(formik.errors.lastName)}
        helperText={formik.touched.lastName && formik.errors.lastName}
      />
      <TextField
        fullWidth
        id="email"
        name="email"
        label="Email"
        value={formik.values.email}
        onChange={formik.handleChange}
        error={formik.touched.email && Boolean(formik.errors.email)}
        helperText={formik.touched.email && formik.errors.email}
      />
      <TextField
        fullWidth
        id="password"
        name="password"
        label="Password"
        type="password"
        value={formik.values.password}
        onChange={formik.handleChange}
        error={formik.touched.password && Boolean(formik.errors.password)}
        helperText={formik.touched.password && formik.errors.password}
      />
      <div>
        <Button variant="contained" onClick={handleClose}>
          Cancel
        </Button>
        <Button type="submit" variant="contained" color="primary">
          Signup
        </Button>
      </div>
    </form>
  );
};

Github commits is here: Basic-1.8.2. Form: Formik V2

Conclusion

formik v2is built on top of React Hooks, requires React 16.8.x or upper, also requires TypeScript 3.0 or higher because unknown type.
[Important] use formik v2 if you are still using class component.