Question

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

我在这里放了codesandbox链接。 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

我使用自定义输入组件制作了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，您正在使用的库TextField不会显示任何内容。道具。

Answer 3

我使用 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 4

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

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

4 个答案: