Question

Redux-forms支持validation errors and warnings。

错误会显示一条消息并阻止提交表单，而警告只显示一条消息。

Redux-forms也支持async validation。

我错误地认为支持异步验证错误和警告，但事实并非如此。

不幸的是warnings are not officially possible with async validation。

目前需要付出相当大的努力才能放弃使用redux-forms，所以我试图找到一个足够的解决方法。

一种解决方案是手动向表单添加警告。如果可能的话，那么异步验证可以大部分正常执行，但是在最后设置警告，而不是提供预期的错误对象。

但我查看了文档，似乎没有办法手动添加警告或错误。

您将验证函数传递给specific field或the form as a whole，redux-forms根据需要调用这些验证函数。

所以似乎无法直接设置错误和警告，但我们可以手动触发特定字段的重新验证吗？

不，显然是this is also not currently possible。

总结一下：

无法进行异步验证警告。
无法手动设置表单警告。
无法手动触发字段的同步验证。

非常欢迎任何建议，见解或更正如果我在任何这些摘要点上错了，我会很高兴的！

如果我找不到解决方案，那么我会找一个替代的库，我将开始艰难的任务，离开redux-forms。

这肯定是对我的假设愚蠢的一个很好的提醒。

Answer 1

我接受了Dennie的建议，并在根减速器中使用reducer.plugin()来侦听redux表单的异步验证完成操作@@redux-form/STOP_ASYNC_VALIDATION，并通过注入（正确或错误）将其从错误更改为警告。 action.payload到syncWarnings中。然后，Redux表单将其作为meta.warning道具传递给该字段。

减速器代码：

import { reducer as formReducer } from 'redux-form';

...

const errorToWarning = (state, action) => {
  /* eslint-disable no-unused-vars, no-case-declarations */
  switch (action.type) {
    case "@@redux-form/STOP_ASYNC_VALIDATION":
      const { asyncErrors, ...noErrors } = state;
      const syncWarnings = action.payload || undefined;
      return { ...noErrors, syncWarnings };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  form: formReducer.plugin({
    FirstForm: errorToWarning,
    AnotherForm: errorToWarning
  }),
  // other reducers
});

export default rootReducer;

组件：

const MyTextField = ({ meta: { touched, error, warning }, ...props }) => {
  let cssClass = "";
  let errorText = "";

  if (touched) {
    cssClass = warning ? "warning" : cssClass;
    cssClass = error ? "error" : cssClass;

    errorText = warning || errorText;
    errorText = error || errorText;
  }

  return (
    <TextField
      className={cssClass}
      hintText={props.hintText || ""}
      {...props}
      errorText={errorText}
      warning={warning}
    />
  );
};

我正在使用Material UI（这是TextField的来源，在导入中未显示）。

有关reducer.plugin()的更多信息，请参见redux-form docs。

Answer 2

表单的异步验证回调作为第二个参数传入[0, 1, 1, 2, 2]。这样，您就可以触发将自定义警告添加到全局Redux状态对象的操作。如果您没有抛出任何错误，则该表格仍将被视为有效。

例如，如果您想警告用户某些给定的输入但想让他们仍然提交数据，则可以通过一些自定义操作调用dispatch，该操作会向全局{{1 }}数组。

dispatch

如何通过异步验证显示redux-form警告？

2 个答案: