手动设置Redux表单字段和/或表单错误

Question

我知道，如果您SubmissionError从handleSubmit()函数中抛出a ，则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)                                            
  );                                                                         
} 

我不能抛出SubmissionErrorin，asyncActionDispatcher()因为它是by redux和not 调用的redux-form。

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

Answer 1

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

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

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

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

Answer 2

是的，它确实。

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

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

asyncValidate另一方面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文档，封装的组件道具文档，同步验证示例，异步验证示例