Using YUP with Material-UI TextField - material-ui

Question

I'm trying to convert a form to use Material-ui TextField. How do I get my YUP validation to work with that? Here is my code:
import * as React from "react";
import { useState } from 'react';
import { Row, Col } from "react-bootstrap";
import TextField from '#material-ui/core/TextField';
import Button from '#material-ui/core/Button';
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Error from "../../Error";
type FormValues = {
username: string;
password: string;
repeatPassword: string;
fullName: string;
country: string;
email: string;
};
export default function CreatePrivateUserForm(props: any) {
const [errorMessage, setErrorMessage] = useState();
const createPrivateAccountSchema = Yup.object().shape({
username: Yup.string()
.required("Required")
.min(8, "Too Short!")
.max(20, "Too Long!")
.matches(/^[\w-.# ]+$/, {
message: "Inccorect carector"
}),
password: Yup.string()
.required("Required")
.min(10, "Too Short!")
.max(100, "Too Long!")
.matches(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[^a-zA-Z\d\s:]).*$/, {
message: "Password need to contain 1 uppercase character (A-Z), 1 lowercase character (a-z), 1 digit (0-9) and 1 special character (punctuation)"
}),
repeatPassword: Yup.string()
.required("Required")
.oneOf([Yup.ref("password")], "Passwords must match")
});
function handleSuccess() {
alert("User was created");
}
async function handleSubmit(values: FormValues) {
const token = await props.googleReCaptchaProps.executeRecaptcha("CreatePrivateUser");
const headers = {
headers: {
Accept: "application/json",
"Content-Type": "application/json",
recaptcha: token
}
};
const body = { username: values.username, password: values.password, repeatPassword: values.repeatPassword };
const url = "xxx";
try {
const response = await axios.post(url, body, headers);
if (response.status === 201) {
handleSuccess();
}
if (response.status === 400) {
console.log("Bad Request ...");
setErrorMessage('Bad Request');
} else if (response.status === 409) {
console.log("Conflict ...");
setErrorMessage('Conflict');
} else if (response.status === 422) {
console.log("Client Error ...");
setErrorMessage('Client Error');
} else if (response.status > 422) {
console.log("Something went wrong ...");
setErrorMessage('Something went wrong');
} else {
console.log("Server Error ...");
setErrorMessage('Server Error');
}
} catch (e) {
console.log("Fejl");
}
}
return (
<React.Fragment>
<Row>
<Col xs={12}>
<p>Please register by entering the required information.</p>
</Col>
</Row>
<Row>
<Col xs={12}>
<Formik
initialValues={{ username: "", password: "", repeatPassword: "" }}
validationSchema={createPrivateAccountSchema}
onSubmit={async (values, { setErrors, setSubmitting }) => {
await handleSubmit(values);
setSubmitting(false);
}}>
{({ isSubmitting }) => (
<Form>
{errorMessage ? <Error errorMessage={errorMessage} /> : null}
<Row>
<Col xs={6}>
<Row>
<Col xs={12}>
<TextField
label="Username"
helperText={touched.username ? errors.username : ""}
error={touched.username && Boolean(errors.username)}
type="text"
name="username"
margin="normal"
variant="filled"
/>
<ErrorMessage name='username'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
</Col>
</Row>
<Row>
<Col xs={12}>
<label htmlFor='password'>Password:</label>
<Field type='password' name='password' />
<ErrorMessage name='password'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
</Col>
</Row>
<Row>
<Col xs={12}>
<label htmlFor='repeatPassword'>Repeat password:</label>
<Field type='password' name='repeatPassword' />
<ErrorMessage name='repeatPassword'>{msg => <div className='error'>{msg}</div>}</ErrorMessage>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col xs={12}>
<button type='submit' disabled={isSubmitting}>
Create User
</button>
</Col>
</Row>
</Form>
)}
</Formik>
</Col>
</Row>
</React.Fragment>
);
}

Answer 1

The first thing I can see is that you have stripped out the standard formik <Field /> components and directly changed to <TextField />. The <Field /> component is actually a special component that "will automagically hook up inputs to Formik. It uses the name attribute to match up with Formik state" according to the fomik documentation. As a result I believe that formik is no longer actually handling the inputs and instead these are uncontrolled components (html components without a value set by react state). With formik no-longer handling the inputs the Yup validation build into formik and being used via the schema prop won't function correctly.
To solve this issue you can either use a libary (material UI suggests this libary - https://github.com/stackworx/formik-material-ui) or you can make custom input components for formik. This allows you to set the <Field />'s component prop to a component that correctly wires up material UI with the formik data <Field /> exposes.
const CustomTextInput = ({
field, // { name, value, onChange, onBlur }
form: { touched, errors }, // also values, setXXXX, handleXXXX, dirty, isValid, status, etc.
...props
}) => (
<div>
<TextField
error={_.get(touched, field.name) && _.get(errors, field.name) && true}
helperText={_.get(touched, field.name) && _.get(errors, field.name)}
{...field}
{...props}
/>
</div>
)
Then in your form you can do this
<Field
name="fieldName"
component={CustomTextInput}
label="You can use the Material UI props here to adjust the input"
/>
You can find an example and more information about this on the formik documentation on field - https://jaredpalmer.com/formik/docs/api/field