如何在 formik 字段组件中显示自定义 <Errormessage> 并禁用默认消息

Question

我正在使用React、Material、Formik、formik-material-ui 制作一个 Web 项目。

我已经使用yup 制作了一个Formik 表单进行验证。

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>

TextField是一个自定义组件如下

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>
    );
});

由于我想显示另一种样式的 ErrorMessage 而不是默认样式，因此我在字段下方添加了。 但是使用这种方法，错误消息会被打印两次。

如何禁用打印默认消息？

Answer 1

您可以使用helperText="" 禁用默认消息

<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
>

Answer 2

您需要删除您的 {msg} 并让 formik 为您处理错误消息

如果要设置错误样式，请使用 formik 中的 className：

Formik 道具类型

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

所以你需要像这样使用它

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