redux-form 仅在提交时显示验证错误

Question

有没有办法配置 redux-form 以便验证错误仅在提交表单时显示？

我还想在用户开始输入或进行更改时清除单个表单域错误。

这可以用 redux-form 实现吗？

Answer 1

您负责呈现任何验证错误，因此您可以将它们配置为仅在提交失败后可见（即用户按下提交并且您的验证返回为失败）。为此，您的 input components wrapped with Field 被传递一个 meta 对象作为一个包含 submitFailed 字段的道具，该字段告诉表单提交是否失败。渲染该组件的实际代码可能如下所示：

render() {
  const { meta: { error, submitFailed } } = this.props
  return (
    // ... rendering the input and then some
    { error && submitFailed ? (
      <span className="validation-error">{ error }</span>
    ) : null }
    // ... rendering the rest
  )
}

为了在用户输入时不显示错误，您负责启用该行为，并且传递给包装输入组件的 props 保存键，这次 meta 对象保存一个名为 active，它告诉你这个输入是否有焦点。代码可能是这样的（基于前面的例子）：

render() {
  const { meta: { active, error, submitFailed } } = this.props
  return (
    // ... rendering the input and then some
    { !active && (error && submitFailed) ? (
      <span className="validation-error">{ error }</span>
    ) : null }
    // ... rendering the rest
  )
}

希望对您有所帮助！

Answer 2

我也有这个问题，原因是使用了 touchOnChange flag

reduxForm({
        form: 'MyForm',
        enableReinitialize: true,
        touchOnChange: true,
})

所以我从 reduxForm 选项中删除了这个标志，代码开始正常工作 - 我只在提交时看到了验证错误

reduxForm({
        form: 'MyForm',
        enableReinitialize: true,
})

来自官网的例子 https://redux-form.com/8.2.2/examples/fieldlevelvalidation/

redux-form 仅在提交时显示验证错误

redux-form only show validation errors on submit

redux-form