Resetting now resets to last actions.load. Fixes #426

Author: davidkpiano

examples/quick-start/components/user-form.js

@@ -4,6 +4,15 @@ import { connect } from 'react-redux';
 
 const required = (val) => !!(val && val.length);
 
+        function hasToBeTrue(value) {
+    if (value === false || typeof value !== 'boolean') {
+        return false;
+    }
+    return true;
+}
+
+// control
+
 class UserForm extends React.Component {
   constructor(props) {
     super(props);
@@ -27,7 +36,7 @@ class UserForm extends React.Component {
   render() {
     const { forms: { user } } = this.props;
 
-    console.log(user.$form.valid);
+    console.log('check me', user.checkMe && user.checkMe.valid);
 
     return (
       <Form model="user" onSubmit={v => console.log(v)}>
@@ -54,6 +63,13 @@ class UserForm extends React.Component {
             <span>Plastic</span>
           </label>
         </Field>
+
+<Control.checkbox
+    model={'user.checkMe'}
+    validators={{ hasToBeTrue }}
+
+    validateOn={'change'}
+/>
         <button type="submit" disabled={!user.$form.valid}>
           Finish registration!
         </button>

examples/quick-start/store.js

@@ -18,7 +18,7 @@ const initialUserState = {
 const store = createStore(combineForms({
   user: initialUserState,
 }), applyMiddleware(
-  createLogger(),
+  // createLogger(),
   thunk));
 
 export default store;

src/reducers/form/change-action-reducer.js

@@ -7,7 +7,7 @@ import compact from 'lodash/compact';
 import mapValues from '../../utils/map-values';
 import { createInitialState } from '../form-reducer';
 import initialFieldState from '../../constants/initial-field-state';
-
+import updateParentForms from '../../utils/update-parent-forms';
 
 function updateFieldValue(field, action) {
   const { value, removeKeys, silent, model } = action;
@@ -24,7 +24,12 @@ function updateFieldValue(field, action) {
     return i.merge(field, changedFieldProps);
   }
 
-  if (silent) return i.set(field, 'value', value);
+  if (silent) {
+    return i.merge(field, {
+      value,
+      initialValue: value,
+    });
+  }
 
   if (removeKeys) {
     const valueIsArray = Array.isArray(field.$form.value);
@@ -87,6 +92,20 @@ function updateFieldValue(field, action) {
     i.set(dirtyFormState, 'value', value));
 }
 
+function getFormValue(form) {
+  if (!form.$form) return form.initialValue;
+
+  const result = mapValues(form, (field, key) => {
+    if (key === '$form') return undefined;
+
+    return getFormValue(field);
+  });
+
+  delete result.$form;
+
+  return result;
+}
+
 export default function changeActionReducer(state, action, localPath) {
   if (action.type !== actionTypes.CHANGE) return state;
 
@@ -96,5 +115,18 @@ export default function changeActionReducer(state, action, localPath) {
 
   if (!localPath.length) return updatedField;
 
-  return i.setIn(state, localPath, updatedField);
+  const updatedState = i.setIn(state, localPath, updatedField);
+
+  if (action.silent) {
+    return updateParentForms(updatedState, localPath, (form) => {
+      const formValue = getFormValue(form);
+
+      return {
+        value: formValue,
+        initialValue: formValue,
+      };
+    });
+  }
+
+  return updatedState;
 }

test/form-reducer-actions-spec.js

@@ -54,6 +54,7 @@ describe('formReducer() (V1)', () => {
         expectedField: {
           pristine: true,
           value: 'string',
+          initialValue: 'string',
         },
       },
       {
@@ -62,6 +63,7 @@ describe('formReducer() (V1)', () => {
         expectedField: {
           pristine: true,
           value: 42,
+          initialValue: 42,
         },
       },
       {
@@ -70,6 +72,7 @@ describe('formReducer() (V1)', () => {
         expectedField: {
           pristine: true,
           value: { foo: 'bar' },
+          initialValue: { foo: 'bar' },
         },
       },
     ],
@@ -591,4 +594,30 @@ describe('formReducer() (V1)', () => {
       assert.equal(resetState.meta.bar.value, '');
     });
   });
+
+  describe('resetting after load', () => {
+    const reducer = formReducer('test', {
+      foo: '',
+    });
+
+    const loadedState = reducer(undefined,
+      actions.load('test.foo', 'new initial'));
+
+    it('should change the initial value for the field', () => {
+      assert.equal(loadedState.foo.initialValue, 'new initial');
+      assert.equal(loadedState.foo.value, 'new initial');
+    });
+
+    it('should change the initial value for the form', () => {
+      assert.deepEqual(loadedState.$form.initialValue, { foo: 'new initial' });
+      assert.deepEqual(loadedState.$form.value, { foo: 'new initial' });
+    });
+
+    it('resetting a parent field should reset child fields in form', () => {
+      const resetState = reducer(loadedState, actions.reset('test'));
+
+      assert.deepEqual(resetState.$form.value, { foo: 'new initial' });
+      assert.equal(resetState.foo.value, 'new initial');
+    });
+  });
 });