How to display custom <Errormessage> in formik field component and disable the default message

Question

I am making a web project using React, Material, Formik, formik-material-ui.

I have made a Formik form using yup for validation.

const schema = yup.object({
    name: yup.string().trim().lowercase().required("Name is required."),
});

<Formik
    initialValues={{
    name: "",
    }}
    validationSchema={schema}
>
    {({ submitForm, isSubmitting, handleSubmit, handleChange, values }) => (
        <Form noValidate onSubmit={handleSubmit}>
            <Grid container direction="row" spacing={2}>
                <Grid container item xs={12} spacing={4}>
                    <Grid item xs={4}>
                        <InputLabel>Patient Name *</InputLabel>
                        <TextField fullWidth name="name" type="text" />
                        <InputLabel>Patient ID: P0006</InputLabel>
                    </Grid>
                </Grid>
            </Grid>
        </Form>
    )}
</Formik>

The TextField is a custom component as follows

import React, { Fragment } from "react";
import { Field, ErrorMessage } from "formik";
import { TextField } from "libs/formik-material-ui/src";

const TextFieldStyle = {
    padding: 8,
    fontSize: "0.75rem",
};

export default React.memo((props: any) => {
    return (
        <Fragment>
            <Field
                component={TextField}
                inputProps={{
                    style: TextFieldStyle,
                }}
                size="small"
                margin="none"
                variant="outlined"
                {...props} // add props at the key to override any user defined similar props
            >
                {props.children}
            </Field>
            <ErrorMessage name={props.name}>{(msg) => <div style={{ color: "red", textAlign: "left" }}>{msg}</div>}</ErrorMessage>
        </Fragment>
    );
});

Since I want to display ErrorMessage of a different style and not the default one, I have added below the field. But with this approach, the error message is being printed twice.

How can I disable the default message from being printed ?

Please check the documentation link

saiful619945
– saiful619945

2021-09-09 10:51:56 +00:00
Commented Sep 9, 2021 at 10:51 — saiful619945
– saiful619945, Commented Sep 9, 2021 at 10:51

Ryan Le · Accepted Answer · 2021-09-09 10:49:19Z

2

You would need to remove your `{msg}` and let formik handle the error message for you

And if you want to style the error, use className from formik:

Formik Props Type

export interface ErrorMessageProps {
    name: string;
    className?: string;
    component?: string | React.ComponentType;
    children?: ((errorMessage: string) => React.ReactNode);
    render?: ((errorMessage: string) => React.ReactNode);
}

So you would need to use it like so

<ErrorMessage name={props.name} className="your-class" />;

answered Sep 9, 2021 at 10:49

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Viet · Accepted Answer · 2021-09-09 10:49:13Z

0

You can use helperText="" to disabled default message

<Field
  component={TextField}
  inputProps={{
    style: TextFieldStyle,
  }}
  size="small"
  margin="none"
  variant="outlined"
  helperText=""
  {...props} // add props at the key to override any user defined similar props
>

answered Sep 9, 2021 at 10:49

Viet

12.9k2 gold badges18 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to display custom <Errormessage> in formik field component and disable the default message

2 Answers 2

You would need to remove your `{msg}` and let formik handle the error message for you

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You would need to remove your {msg} and let formik handle the error message for you

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

You would need to remove your `{msg}` and let formik handle the error message for you