add clearAsyncError feature (#2213)

* add clearAsyncError feature

* fix clearAsyncError specs

* update clearAsyncError doc

docs/api/Props.md

@@ -7,7 +7,7 @@ to your decorated form component. The `props` that _you pass into your wrapped c
 listed [here](https://redux-form.com/6.3.0/docs/api/ReduxForm.md/).
 
 > If you are a strict `PropTypes` completionist, `redux-form` exports all of these
-[`propTypes`](https://github.com/erikras/redux-form/blob/master/src/propTypes.js), 
+[`propTypes`](https://github.com/erikras/redux-form/blob/master/src/propTypes.js),
 so you may import them, like so:
 
 ```javascript
@@ -37,7 +37,7 @@ This is a bound action creator, so it returns nothing.
 
 > #### `array.move(field:String, from:Number, to:Number) : Function`
 
-> Moves a value at the given `from` index to the given `to` index in the given array field in 
+> Moves a value at the given `from` index to the given `to` index in the given array field in
 your form.
 This is a bound action creator, so it returns nothing.
 
@@ -68,7 +68,7 @@ This is a bound action creator, so it returns nothing.
 
 > #### `array.splice(field:String, index:Number, removeNum:Number, value:Any) : Function`
 
-> Performs an 
+> Performs an
 [`Array.splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
 operation on the given array in your form.
 This is a bound action creator, so it returns nothing.
@@ -89,16 +89,16 @@ This is a bound action creator, so it returns nothing.
 
 ### `asyncValidating : String | boolean`
 
-> This value will be either: 
+> This value will be either:
 > * `false` - No asynchronous validation is currently happening
 > * `true` - Asynchronous validation is currently running in preparation to submit a form
 > * a `string` - The name of the field that just blurred to trigger asynchronous validation
 
 ### `autofill(field:String, value:any) : Function`
 
-> Sets the value and marks the field as `autofilled` in the Redux Store. This is useful when a 
-a field needs to be set programmatically, but in a way that lets the user know (via a styling 
-change using the `autofilled` prop in `Field`) that it has been autofilled for them 
+> Sets the value and marks the field as `autofilled` in the Redux Store. This is useful when a
+a field needs to be set programmatically, but in a way that lets the user know (via a styling
+change using the `autofilled` prop in `Field`) that it has been autofilled for them
 programmatically.
 This is a bound action creator, so it returns nothing.
 
@@ -112,6 +112,11 @@ This is a bound action creator, so it returns nothing.
 > Changes the value of a field in the Redux store.
 This is a bound action creator, so it returns nothing.
 
+### `clearAsyncError(field:String) : Function`
+
+> Clear async error of a field in the Redux store.
+This is a bound action creator, so it returns nothing.
+
 ### `destroy() : Function`
 
 > Destroys the form state in the Redux store. By default, this will be called for you in
@@ -196,12 +201,12 @@ This is a bound action creator, so it returns nothing.
 
 #### `submitFailed : boolean`
 
-> Starts as `false`. If `onSubmit` is called, and fails to submit _for any reason_, `submitFailed` will be set to 
+> Starts as `false`. If `onSubmit` is called, and fails to submit _for any reason_, `submitFailed` will be set to
 `true`. A subsequent successful submit will set it back to `false`.
 
 #### `submitSucceeded : boolean`
 
-> Starts as `false`. If `onSubmit` is called, and succeed to submit , `submitSucceeded` will be set to 
+> Starts as `false`. If `onSubmit` is called, and succeed to submit , `submitSucceeded` will be set to
 `true`. A subsequent unsuccessful submit will set it back to `false`.
 
 #### `submitting : boolean`

src/__tests__/actions.spec.js

@@ -30,7 +30,8 @@ import {
   UNREGISTER_FIELD,
   UNTOUCH,
   UPDATE_SYNC_ERRORS,
-  UPDATE_SYNC_WARNINGS
+  UPDATE_SYNC_WARNINGS,
+  CLEAR_ASYNC_ERROR
 } from '../actionTypes'
 import {
   arrayInsert,
@@ -62,7 +63,8 @@ import {
   unregisterField,
   untouch,
   updateSyncErrors,
-  updateSyncWarnings
+  updateSyncWarnings,
+  clearAsyncError
 } from '../actions'
 import { isFSA } from 'flux-standard-action'
 expect.extend(expectPredicate)
@@ -648,4 +650,16 @@ describe('actions', () => {
       })
       .toPass(isFSA)
   })
+
+  it('should create clearAsyncError action', () => {
+    expect(clearAsyncError('myForm', 'foo'))
+      .toEqual({
+        type: CLEAR_ASYNC_ERROR,
+        meta: {
+          form: 'myForm',
+          field: 'foo'
+        }
+      })
+      .toPass(isFSA)
+  })
 })

src/__tests__/reducer.clearAsyncError.spec.js

@@ -0,0 +1,32 @@
+import { clearAsyncError } from '../actions'
+
+const describeClearAsyncError = (reducer, expect, { fromJS }) => () => {
+  it('should do nothing on clear submit with no previous state', () => {
+    const state = reducer(undefined, clearAsyncError('foo'))
+    expect(state)
+      .toEqualMap({
+        foo: {}
+      })
+  })
+
+  it('should clear async errors with previous state', () => {
+    const state = reducer(fromJS({
+      myForm: {
+        asyncErrors: {
+          foo: 'some validation message here',
+          baar: 'second validation message'
+        }
+      }
+    }), clearAsyncError('myForm', 'foo'))
+    expect(state)
+      .toEqualMap({
+        myForm: {
+          asyncErrors: {
+            baar: 'second validation message'
+          }
+        }
+      })
+  })
+}
+
+export default describeClearAsyncError

src/__tests__/reducer.spec.js

@@ -19,6 +19,7 @@ import describeAutofill from './reducer.autofill.spec'
 import describeBlur from './reducer.blur.spec'
 import describeChange from './reducer.change.spec'
 import describeClearSubmit from './reducer.clearSubmit.spec'
+import describeClearAsyncError from './reducer.clearAsyncError.spec'
 import describeDestroy from './reducer.destroy.spec'
 import describeFocus from './reducer.focus.spec'
 import describeTouch from './reducer.touch.spec'
@@ -53,6 +54,7 @@ const tests = {
   blur: describeBlur,
   change: describeChange,
   clearSubmit: describeClearSubmit,
+  clearAsyncError: describeClearAsyncError,
   destroy: describeDestroy,
   focus: describeFocus,
   reset: describeReset,

src/__tests__/reduxForm.spec.js

@@ -105,6 +105,7 @@ const describeReduxForm = (name, structure, combineReducers, expect) => {
         'autofill',
         'blur',
         'change',
+        'clearAsyncError',
         'clearSubmit',
         'destroy',
         'dirty',

src/actionTypes.js

@@ -12,6 +12,7 @@ export const AUTOFILL = '@@redux-form/AUTOFILL'
 export const BLUR = '@@redux-form/BLUR'
 export const CHANGE = '@@redux-form/CHANGE'
 export const CLEAR_SUBMIT = '@@redux-form/CLEAR_SUBMIT'
+export const CLEAR_ASYNC_ERROR = '@redux-form/CLEAR_ASYNC_ERROR'
 export const DESTROY = '@@redux-form/DESTROY'
 export const FOCUS = '@@redux-form/FOCUS'
 export const INITIALIZE = '@@redux-form/INITIALIZE'

src/actions.js

@@ -1,7 +1,7 @@
 import {
   ARRAY_INSERT, ARRAY_MOVE, ARRAY_POP, ARRAY_PUSH, ARRAY_REMOVE, ARRAY_REMOVE_ALL, ARRAY_SHIFT,
-  ARRAY_SPLICE, ARRAY_SWAP, ARRAY_UNSHIFT, AUTOFILL, BLUR, CHANGE, CLEAR_SUBMIT, DESTROY, FOCUS,
-  INITIALIZE,
+  ARRAY_SPLICE, ARRAY_SWAP, ARRAY_UNSHIFT, AUTOFILL, BLUR, CHANGE, CLEAR_SUBMIT, CLEAR_ASYNC_ERROR,
+  DESTROY, FOCUS, INITIALIZE,
   REGISTER_FIELD, RESET, SET_SUBMIT_FAILED, SET_SUBMIT_SUCCEEDED, START_ASYNC_VALIDATION, START_SUBMIT,
   STOP_ASYNC_VALIDATION, STOP_SUBMIT, SUBMIT, TOUCH, UNREGISTER_FIELD, UNTOUCH, UPDATE_SYNC_ERRORS,
   UPDATE_SYNC_WARNINGS
@@ -64,6 +64,9 @@ export const change = (form, field, value, touch, persistentSubmitErrors) =>
 export const clearSubmit = (form) =>
   ({ type: CLEAR_SUBMIT, meta: { form } })
 
+export const clearAsyncError = (form, field) =>
+  ({ type: CLEAR_ASYNC_ERROR, meta: { form, field } })
+
 export const destroy = (form) =>
   ({ type: DESTROY, meta: { form } })
 

src/reducer.js

@@ -13,6 +13,7 @@ import {
   BLUR,
   CHANGE,
   CLEAR_SUBMIT,
+  CLEAR_ASYNC_ERROR,
   DESTROY,
   FOCUS,
   INITIALIZE,
@@ -171,6 +172,9 @@ const createReducer = structure => {
     [CLEAR_SUBMIT](state) {
       return deleteIn(state, 'triggerSubmit')
     },
+    [CLEAR_ASYNC_ERROR](state, { meta: { field } } ) {
+      return deleteIn(state, `asyncErrors.${field}`)
+    },
     [FOCUS](state, { meta: { field } }) {
       let result = state
       const previouslyActive = getIn(state, 'active')