渲染后如何在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

我使用自定义输入组件制作了basic demo 版本。 Formik 没有内置选项来执行此操作，因此很遗憾，您需要创建自己的字段组件以与 Formik 的 props 集成，并绕过如果未触摸表单则不会显示验证的逻辑。

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 属性，您可以在主 Formik 组件上将其设置为 false，但同样，如果没有 touched 属性，您使用的库 TextFields 将不会显示任何内容。

Answer 2

2021 年更新：

使用validateOnMount 道具：

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

Answer 3

validateOnMount 如果您还添加了initialTouched，则可以使用，但是当它在提交后显示验证问题并不会导致不同的视图或组件时，它有限制（...或者更好的说法是错误）。

我发现了非常优雅的解决方法，可以按预期工作。

const formikRef = React.useRef(null);
React.useEffect(() => formikRef.current.validateForm(), []);

return (
    <Formik
        innerRef={formikRef}
        initialValues={props.customer}
        initialTouched={mapObject(props.customer, true)}
        onSubmit={values => {
.
.
.

Answer 4

我使用 Yup 的 validateAtSync function 完成了此操作，同时从查询字符串填充表单的初始值。

function generateInitialValues(tabs: TabType[], router: any, validationSchema: any) {
  const initialValues: { [key: string]: number | string }  = {};
  _.forEach(tabs, (tab: TabType) => {
    _.forEach(tab.formFields, (f: FormField) => {
      let isFieldValid;
      try {
        // https://github.com/jquense/yup#mixedvalidatesyncatpath-string-value-any-options-object-any
        console.log('validation schema validateAt: ', validationSchema.validateSyncAt(f.id, router.query[f.id]));
        isFieldValid = validationSchema.validateSyncAt(f.id, router.query[f.id]);
      } catch (e) {
        // do nothing on purpose to stop exception from being thrown
        // TODO: Consider doing something here, such as recording a metric
      }

      initialValues[f.id] = isFieldValid ? router.query[f.id] : f.defaultValue;
    })
  });
  return initialValues;
}

Answer 5

您可以使用 isInitialValid 或 initialErrors 来使初始值有效。 查看他们的官方文档here。