[Formik] Complete Form

BasicForm.tsx

import * as React from "react";
import { Formik, Form, FastField, ErrorMessage } from "formik";
import * as Yup from "yup";

interface IProps {}

interface IFormValues {
  username: string;
  name: string;
  email: string;
  password: string;
  password_confirmation: string;
}

const signUp = (values: IFormValues) =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(true);
    }, 1000);
  });

const BasicForm = () => {
  const handleSubmit = React.useCallback((values: IFormValues, actions) => {
    signUp(values);
    actions.setSubmitting(false);
  }, []);

  return (
    <Formik<IFormValues>
      initialValues={{
        username: "",
        name: "",
        email: "",
        password: "",
        password_confirmation: ""
      }}
      onSubmit={handleSubmit}
      validationSchema={validationSchema}
    >
      {({ isSubmitting }) => (
        <Form>
          <FastField
            type="name"
            name="name"
            placeholder="Name"
            disabled={isSubmitting}
          />
          <ErrorMessage name="name" component="div" />
          <br />
          <FastField
            type="email"
            name="email"
            placeholder="Email"
            disabled={isSubmitting}
          />
          <ErrorMessage name="email" component="div" />
          <br />
          <FastField
            type="text"
            name="username"
            placeholder="Username"
            disabled={isSubmitting}
          />
          <ErrorMessage name="username" component="div" />
          <br />
          <FastField
            type="password"
            name="password"
            placeholder="Password"
            disabled={isSubmitting}
          />
          <ErrorMessage name="password" component="div" />
          <br />
          <FastField
            type="password"
            name="password_confirmation"
            placeholder="Retype Password"
            disabled={isSubmitting}
          />
          <ErrorMessage name="password_confirmation" component="div" />
          <br />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
          <button type="reset" disabled={isSubmitting}>
            Reset
          </button>
        </Form>
      )}
    </Formik>
  );
};

const isUsernameValid = (username: string): Promise<boolean> =>
  new Promise(resolve => {
    const fakeUsernames = ["phuchoang2710", "abc123"];
    setTimeout(() => {
      resolve(fakeUsernames.indexOf(username) < 0);
    }, 1000);
  });

const validationSchema = Yup.object().shape<IFormValues>({
  name: Yup.string().required("Please enter your name"),
  email: Yup.string()
    .email("Please enter valid email")
    .required("Please enter your email"),
  username: Yup.string()
    .required("Please enter username")
    .min(5, "Your username is too short")
    .max(30, "Your username is too long")
    .test("isUnique", "This username is already exist", isUsernameValid),
  password: Yup.string()
    .min(5, "Your password is too short")
    .max(30, "Your password is too long"),
  password_confirmation: Yup.string()
    .oneOf([Yup.ref("password"), null], "Password does not match")
    .required("Please retype password")
});

export default BasicForm;