[Formik] Full Field

BasicForm.tsx

const BasicForm = () => {
  const handleSubmit = React.useCallback((values: IFormValues) => {
    console.log(values);
  }, []);

  return (
    <Formik<IFormValues>
      initialValues={{
        username: "",
        name: "",
        email: "",
        password: "",
        password_confirmation: ""
      }}
      onSubmit={handleSubmit}
      validate={values => {
        const { name } = values;
        const errors = {} as any;
        if (!name) {
          errors.name = "Please enter your name";
        }
        return errors;
      }}
    >
      {() => (
        <Form>
          <FastField type="name" name="name" placeholder="Name" />
          <ErrorMessage name="name" component="div" />
          <br />
          <FastField type="email" name="email" placeholder="Email" />
          <ErrorMessage name="email" component="div" />
          <br />
          <FastField type="text" name="username" placeholder="Username" />
          <ErrorMessage name="username" component="div" />
          <br />
          <FastField type="password" name="password" placeholder="Password" />
          <ErrorMessage name="password" component="div" />
          <br />
          <FastField
            type="password_confirmation"
            name="password_confirmation"
            placeholder="Retype Password"
          />
          <ErrorMessage name="password_confirmation" component="div" />
          <br />
          <button type="submit">Submit</button>
          <button type="reset">Reset</button>
        </Form>
      )}
    </Formik>
  );
};