reactjs - 如何隐藏错误消息并仅在 yup 测试中突出显示字段

Question

我有一个运行许多验证的模式。但是我不想在出现错误的情况下显示一些错误消息，尽管我希望突出显示该字段。给出空字符串而不是错误消息会导致 formik 不显示红色输入字段但验证运行。这是我当前的代码

const LocationDetailsSchema = Yup.object().shape({
  location: Yup.string(),
  locationCategory: Yup.string(),
  lat: Yup.number()
    .min(-85, "Not a valid Latitude")
    .max(85, "Not a valid Latitude")
    .nullable()
    .transform(function(value) {
      return this.isType(value) ? value : null;
    })
    .test(
      "match",
      "", //empty string fails, putting a text shows but i don't want the text to appear
      function(){
        if (principalAmount>=500000) return true;
        return false;
      }
    ),
  lon: Yup.number()
    .min(-180, "Not a valid Longitude")
    .max(180, "Not a valid Longitude")
    .nullable()
    .transform(function(value) {
      return this.isType(value) ? value : null;
    })
    .test(
      "match",
      "Is valid", // this works but i don't want the text to appear either
      function(){
        if (principalAmount>=500000) return true;
        return false;
      }
    ),
});

Answer 1

您可能希望以这种方式使用 formik，以便您可以访问字段错误（如果有）：

 <Formik
        initialValues={initialValues}
        onSubmit={onSubmit}
        validationSchema={validationSchema}
      >
        {(props) => {
          return (
            <Form>
              <Input
                style={{
                  direction: "rtl",
                  border:
                    props.touched.name && props.errors.name ? "red" : "none",
                }}
                onBlur={() => props.setFieldTouched("name")}
                onChange={(e) => props.setFieldValue("name", e.target.value)}
                props={props}
                className={""}
              />
            </Form>
          );
        }}
      </Formik>

在这里，如果组件被触摸并出现错误，我将边框样式应用于组件：

 border : props.touched.name && props.errors.name ? "red" : "none",

您可以使用此方法应用自己的逻辑和样式。