javascript - 提交Formik表单时如何在TextField上显示验证错误而没有字段触摸

Question

我有带有validationSchema和输入字段的Formik表单，它们的实现方式如下：

<TextField
  error={Boolean(touched.email && errors.email)}
  fullWidth
  helperText={touched.email && errors.email}
  label="Email address"
  name="email"
  onBlur={handleBlur}
  onChange={handleChange}
  required
  value={values.email}
  variant="outlined"
/>

如果用户触摸该字段，它将被验证并且他将看到一条错误消息。但是，如果他没有触摸该字段并尝试提交表单，验证将阻止它，但不会显示错误消息。

是否可以强制每个字段都被触及 onSubmit 或其他可以涵盖这种情况的东西？

标签： javascriptreactjsformik

Answer 1

实际上，您显示错误的条件不是一个好方法，我的意思是：

helperText={touched.email && errors.email}

单击提交按钮后，您可以访问onSubmit方法并在其中onSubmit检查表单error是否存在，如果存在，则传递本地状态并让组件更新并使用本地状态显示helperText为错误。

使用touched.email不是一个好方法，特别是当您有多个输入时。不可能同时集中所有这些。