手动设置 redux-form 字段和/或表单错误

Question

我知道，如果您从 handleSubmit() 函数中抛出 SubmissionError，redux-form 代码将填写相应字段和/或表单本身的错误。

然而，设置字段/表单错误的 API 将我们的 handleSumbit() 实现紧密耦合为调用 redux-form 代码（其中包含 SubmissionError 异常处理程序）。

我的用例是这样的：

function asyncActionDispatcher(values) {                                     
  return (dispatch, getState) => {                                           
    // I'm using getState, which is not accessible in handleSubmit()         
    // But I'd also like to be able to set errors on the form fields and/or the
    // form.                                                                 
  };                                                                         
}                                                                            

function handleSubmit(values, dispatch) {                                    
  dispatch(                                                                  
    asyncActionDispatcher(values)                                            
  );                                                                         
} 

我不能在asyncActionDispatcher() 中抛出SubmissionError，因为它是由redux 而不是redux-form 调用的。

redux-form 是否有另一个 API 可以在字段/表单上设置错误？

Answer 1

是的，确实如此。

您可以使用 validate 和 asyncValidate 属性为表单的值设置验证器函数（分别为同步和异步）。

validate 应该是一个函数，如果验证通过，则返回一个空对象或以 { someField: 'some error', otherField: 'other error' } 形式详细说明验证错误的对象

另一方面，asyncValidate 应该返回一个Promise，如果验证通过，则该Promise 会正常解析；如果验证未通过，则该Promise 会被拒绝，并带有详细说明验证错误的对象（见上文）。

handleSubmit 的实现方式是在调用onSubmit 之前运行同步和异步验证，因此如果您设置了validate 和asyncValidate，这些错误应该出现在您的表单/字段中无需任何额外工作即可自动完成。

希望这会有所帮助！

更新：

您也可以等到asyncActionDispatcher 完成并继续提交或使用SubmissionError 拒绝，具体取决于它的结果。

function asyncActionDispatcher(values) {
  return (dispatch, getState) => {
    if (success) {
      return Promise.resolve('success')
    } else {
      return Promise.reject('error')
    }
  }
}

function onSubmit(values, dispatch) {
  // dispatch whatever action you need to dispatch
  return dispatch(asyncActionDispatcher(values))
    .then(() => {
      // i guess you need to do your actual submitting here
    })
    .catch(error => {
      return new SubmissionError({ _error: 'whatever you want here' })
    })
}

// and in the component
<form onSubmit={ handleSubmit(onSubmit) }> ... </form>

来源：Redux-Form docs、wrapped component props documentation、synchronous validation example、asynchronous validation example

Answer 2

您的handleSubmit() 是这样调用的：

handleSubmit(values, dispatch, props)

...props 对象的属性之一是stopSubmit() 函数。

这就是你想要使用的，它的API类似于here描述的：

stopSubmit(form:String, errors:Object)
// Flips the submitting flag false and populates submitError for each field.

您需要在自己导入该函数并使用它时指定唯一的 form 字符串标识符，但如果您使用 handleSubmit() 之前的版本（通过 props 对象），那么您不需要需要为第一个参数提供参数。

Answer 3

我从 axios 的 .catch() 回调中抛出 SubmissionError，它是从 thunk 内部调用的，所以我认为您应该能够在 ReduxSaga 中执行相同的操作。只需确保return，这样您就不会收到未捕获的异常错误。在我的例子中，thunk 返回 axios 调用，在 .handleSubmit() 内部我返回 thunk。

Answer 4

redux-form 是否有另一个 API 可以在字段/表单上设置错误？

当asyncValidate 和其他建议的选项不起作用时（例如，因为验证考虑多种形式），这里的另一个选项是直接发送updateSyncErrors。下面的示例用法：

const { updateSyncErrors } = require('redux-form/lib/actions').default;

dispatch(updateSyncErrors('formName', {
  fieldName: 'Some Error Message'
}));