渲染后如何在formik中触发验证？

Question

我有一个关于 formik 的问题。基本上，我将有一个表格，其中列出了有错误的表单的所有 Id。当用户单击表单的 Id 时，它将显示表单本身。要求是在呈现表单时也应该显示错误。有谁知道如何用 Formik 做到这一点？此外，如果用户编辑该字段，则字段验证应正常工作。

我把代码和盒子链接放在这里。https://codesandbox.io/s/pensive-brattain-yyls2。基本上我希望当表单出现时我应该看到错误，而不仅仅是当用户离开该字段或更改它时。谢谢你。

import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";

class Post0 extends React.Component {
   validateEmptyName(value) {
      if (!value) {
        return "Invalid Name";
      }
   }

 render() {
  return (
  <div>
    <Formik
      initialValues={{
        email: "",
        animal: ""
      }}
      onSubmit={values => {
        this.props.nextStep(values);
      }}
      render={({ values, isSubmitting }) => (
        <Form>
          <Field
            name="email"
            type="email"
            value={values.email}
            component={TextField}
            variant="outlined"
            validate={this.validateEmptyName}
          />
          <Field
            name="animal"
            value={values.animal}
            component={TextField}
            variant="outlined"
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    />
  </div>
);

} }

Answer 1

2021 年更新：

使用validateOnMount道具：

https://formik.org/docs/api/formik#validateonmount-boolean

Answer 2

我使用自定义输入组件制作了一个基本的演示版本。Formik 没有内置选项来执行此操作，因此不幸的是，您需要创建自己的字段组件以与 Formik 的道具集成并绕过如果未触及表单则不会显示验证的逻辑。

const Input = ({ field, form }) => {
  useEffect(() => {
    form.validateForm();
  }, []);

  return (
    <div>
      <input
        style={{
          border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
        }}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
      />
      {form.errors[field.name] && (
        <span style={{ color: "red" }}>{form.errors[field.name]}</span>
      )}
    </div>
  );
};

然后将它作为component你的<Field/>.

Formik 确实提供了一个isInitialValid道具，您可以false在主要 Formik 组件上设置它，但同样，如果没有touched道具，您使用的库 TextFields 将不会显示任何内容。