Question

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

＆＃xA;＆＃xA;

另外我想清除单个表单字段错误当用户开始输入或进行更改时。

＆＃xA;＆＃xA;

这是否可以使用redux-form？

＆＃xA;

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对象包含一个名为{{1的字段告诉你这个输入是否有焦点。代码可能是这样的（基于前面的例子）：

active

希望这有帮助！

Answer 2

我也遇到了这个问题，原因是使用了 touchOnChange 标志

all' :: Foldable f => (a -> Bool) -> f a -> Bool
all' = flip foldr True . ((&&) .)

所以我从 reduxForm 选项中删除了该标志，并且代码开始正确运行-我看到仅提交时的验证错误

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

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

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

2 个答案: