手动设置 redux-form 字段 and/or 表单错误

Question

我知道如果您从 handleSubmit() 函数中抛出 SubmissionError，redux-form 代码将填写相应字段的错误 and/or形成自己。

然而 API 的设置 field/form 错误，将我们 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 来设置 fields/form 上的错误？

Answer 1

是的，确实如此。

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

validate 应该是一个函数，如果验证通过，return 是一个空对象，或者是一个以 { someField: 'some error', otherField: 'other error' }

形式详细说明验证错误的对象另一方面，

asyncValidate 应该 return 一个 Promise 如果验证通过则正常解析，或者如果验证通过则被拒绝并详细说明验证错误（见上文）不及格

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

希望对您有所帮助！

更新：

您也可以等到 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 Object)，那么第一个参数就不需要提供实参了。

Answer 3

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

Answer 4

Does redux-form have another API to set errors on fields/form?

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

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

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

Answer 5

onSubmit 回调有 values、dispatch、props 个参数。你也可以使用updateSyncErrors方法

props.updateSyncErrors({form_field_name: "Some field level error"})

手动设置 redux-form 字段 and/or 表单错误

Manually set redux-form field and/or form errors

reactjs

redux

react-redux

redux-form

redux-thunk