Adding persist prop to Control. Fixes #594

Author: davidkpiano

docs/api/Control.md

@@ -16,6 +16,7 @@
 - [`ignore`](#prop-ignore)
 - [`disabled`](#disabled)
 - [`getRef`](#prop-getRef)
+- [`persist`](#prop-persist)
 
 ## `<Control>`
 
@@ -347,3 +348,18 @@ _(Function)_: Calls the callback provided to the `getRef` prop with the node ins
   getRef={(node) => this.attach(node)}
 />
 ```
+
+<h2 id="prop-persist"></h2>
+## `persist={false}`
+_(Boolean)_: Signifies that the field state (validation, etc.) should not persist when the component is unmounted. Default: `false`
+
+```jsx
+// If user.name is less than 8 characters and persist == true, its validity will be:
+// { length: false }
+// even when the control is unmounted.
+<Control.text
+  model="user.name"
+  validators={{ length: (value) => value.length > 8 }}
+  persist
+/>
+```

react-redux-form.d.ts

@@ -206,6 +206,10 @@ export interface ControlProps<T> extends React.HTMLProps<T> {
      * to event handlers as the second prop.
      */
     withField?: boolean;
+    /**
+     * Signifies that the field state (validation, etc.) should not persist when the component is unmounted. Default: false
+     */
+    persist?: boolean;
 }
 
 export class Control<T> extends React.Component<ControlProps<T>, {}> {
@@ -395,8 +399,8 @@ interface BaseFieldsetProps {
     className?: string;
     /**
      * The component that the <Fieldset> should be rendered to (default: "div").
-     * 
-     * * For React Native, the View component is used to render the fieldset, if you import { Fieldset } from 'react-redux-form/native'. 
+     *
+     * * For React Native, the View component is used to render the fieldset, if you import { Fieldset } from 'react-redux-form/native'.
      */
     component?: React.ComponentClass<any> | string;
 }
@@ -405,7 +409,7 @@ export interface FieldsetProps extends BaseFieldsetProps {
      * The string or tracker representing the model value of the entire form in the store.
 	 *
 	 * You can also use partial models for <Control>, <Field>, and <Errors> components inside of <Fieldset> - they will be resolved to the fieldset's model.
-	 * 
+	 *
 	 * In addition, you can use a partial model for <Fieldset> itself - it will resolve to the parent <Fieldset> (yes, you can nest fieldsets) or <Form> models.
      */
     model: string | ModelGetterFn;

src/components/control-component.js

@@ -111,6 +111,7 @@ const propTypes = {
   getRef: PropTypes.func,
   withField: PropTypes.bool,
   debounce: PropTypes.number,
+  persist: PropTypes.bool,
 };
 
 const defaultStrategy = {
@@ -185,9 +186,10 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
         dispatch,
         validators = {},
         errors = {},
+        persist,
       } = this.props;
 
-      if (fieldValue && !fieldValue.valid) {
+      if (!persist && fieldValue && !fieldValue.valid) {
         const keys = Object.keys(validators)
           .concat(Object.keys(errors), this.willValidate ? validityKeys : []);
 
@@ -595,7 +597,6 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
         control,
         getRef,
       } = this.props;
-      // console.log('RENDERING', this.props.model);
 
       const mappedProps = omit(this.getMappedProps(), disallowedProps);
 
@@ -635,6 +636,7 @@ function createControlClass(customControlPropsMap = {}, s = defaultStrategy) {
     mapProps: controlPropsMap.default,
     component: 'input',
     withField: true,
+    persist: false,
   };
 
   function mapStateToProps(state, props) {

test/control-component-spec.js

@@ -1,4 +1,4 @@
-/* eslint react/no-multi-comp:0 react/jsx-no-bind:0 */
+ /* eslint react/no-multi-comp:0 react/jsx-no-bind:0 */
 import { assert } from 'chai';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -1950,5 +1950,55 @@ Object.keys(testContexts).forEach((testKey) => {
         assert.equal(input.value, 'debounced');
       });
     });
+
+    describe('persist prop', () => {
+      const initialState = getInitialState({ foo: 'bar' });
+      const store = testCreateStore({
+        test: modelReducer('test', initialState),
+        testForm: formReducer('test', initialState),
+      });
+
+      it('should persist validation on unmount when persist = true', () => {
+        const container = document.createElement('div');
+
+        const field = ReactDOM.render(
+          <Provider store={store}>
+            <Control.input
+              model="test.foo"
+              validators={{ valid: () => false }}
+              persist
+            />
+          </Provider>,
+          container);
+
+        const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+        ReactDOM.unmountComponentAtNode(container);
+
+        assert.isFalse(store.getState().testForm.foo.valid);
+        assert.deepEqual(store.getState().testForm.foo.validity, { valid: false });
+      });
+
+      it('should not persist validation on unmount when persist = false (default)', () => {
+        const container = document.createElement('div');
+
+        const field = ReactDOM.render(
+          <Provider store={store}>
+            <Control.input
+              model="test.foo"
+              validators={{ valid: () => false }}
+              persist={false}
+            />
+          </Provider>,
+          container);
+
+        const input = TestUtils.findRenderedDOMComponentWithTag(field, 'input');
+
+        ReactDOM.unmountComponentAtNode(container);
+
+        assert.isTrue(store.getState().testForm.foo.valid);
+        assert.deepEqual(store.getState().testForm.foo.validity, {});
+      });
+    });
   });
 });