formik-yup-example

FormValues.tsx

import React from 'react';
import { withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';

const styles = () =>
  createStyles({
    root: {
      padding: 5,
      marginTop: 20,
    },
  });

function replacer(_: string, value: any) {
  // Filtering out properties
  if (value instanceof File) {
    return {
      size: value.size,
      name: value.name,
      type: value.type,
    };
  }
  return value;
}

interface Props extends WithStyles<typeof styles> {
  values: any;
}

const FormValues = ({ values, classes }: Props) => (
  <div className={classes.root}>
    <Typography variant="h5" component="h5"> State </Typography>
    <Typography component="p">{JSON.stringify(values, replacer, 2)}</Typography>
  </div>
);

export default withStyles(styles)(FormValues);

SignIn.tsx

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Button from '@material-ui/core/Button';
import { Formik, Field, Form } from 'formik';
import { submitSignUpForm } from '../../actions';
import {
  LinearProgress,
  withStyles,
  Theme,
  createStyles
} from '@material-ui/core';
import * as yup from 'yup';
import { TextField } from 'formik-material-ui';
import FormValues from './FormValues';
import { Dispatch, Action, ActionCreator } from 'redux';

const schema = yup.object().shape({
  user: yup.object().shape({
    email: yup
      .string()
      .email()
      .required(),
  }),
  password: yup.string().required()
});

const styles = (theme: Theme) =>
  createStyles({
    container: {
      display: 'flex',
      flexWrap: 'wrap',
    },
    textField: {
      marginLeft: theme.spacing.unit,
      marginRight: theme.spacing.unit,
      width: 200,
    },
    dense: {
      marginTop: 19,
    },
    menu: {
      width: 200,
    },
  });
type SubmitValues = {
  user: {
    email: string,
  },
  password: string
}
type Props = {
  submitSignUpForm: ActionCreator<Action>
}

class SignUpForm extends Component<Props> {
  constructor(props: Props) {
    super(props)
    this.handleOnSubmit = this.handleOnSubmit.bind(this)
  }

  async handleOnSubmit(values: SubmitValues, { setSubmitting }: any) {
    setSubmitting(true);
    this.props.submitSignUpForm(values.user.email, values.password);
  }
  render() {
    return (
      <Formik
        initialValues={{ user: { email: '[email protected]' }, password: '12345678' }}
        validationSchema={schema}
        onSubmit={this.handleOnSubmit}
        render={({ submitForm, isSubmitting, values }) => (

          <Form>
            <Field
              type="email"
              label="Email"
              name="user.email"
              component={TextField}
            />
            <br />
            <Field
              type="password"
              label="Password"
              name="password"
              component={TextField}
            />
            <br />
            {isSubmitting && <LinearProgress />}
            <br />
            <Button
              variant="contained"
              color="secondary"
              disabled={isSubmitting}
              onClick={() => {
                try {
                  submitForm()
                } catch(error) {
                  alert(error)
                }
              }}
            >
            Sign UP
            </Button>
            <br />
            <FormValues values={values} />
          </Form>
        )}
      />
    );
  }
}

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
  submitSignUpForm: (email: string, password: string) => dispatch(submitSignUpForm({email, password}))
})

export default withStyles(styles)(connect(null, mapDispatchToProps)(SignUpForm));