Adding ability to remotely trigger a submit in a form.

Author: davidkpiano

docs/api/actions.md

@@ -379,7 +379,7 @@ An "untouched" field indicates that this model has not been interacted with yet.
 - This action is useful for conditionally displaying error messages based on whether the field has been touched.
 
 <h2 id="actions-submit"></h2>
-## `actions.submit(model, promise)`
+## `actions.submit(model, [promise])`
 
 Waits for a submission `promise` to be completed, then, if successful:
 - Sets `.submitted` property of form for `model` to `true`
@@ -389,9 +389,12 @@ If the promise fails, the action will:
 - set `.submitFailed` property of form for `model` to `true`
 - set `.errors` property of form for `model` to the response
 
+If a promise is not provided, e.g.: `actions.submit('user')`, then dispatching the action will trigger a `<Form>` with the specified `model` to submit itself.
+
 ### Arguments
 - `model` _(String | Function)_: the model to be submitted
 - `promise` _(Promise)_: the promise that the submit action will wait to be resolved or rejected
+  - default: `undefined` - will trigger a submit in the `<Form>` component with the specified `model`.
 - `options` _(Object)_: submit options:
 
 ### Options

src/actions/field-actions.js

@@ -21,6 +21,19 @@ const defaultStrategies = {
 };
 
 function createFieldActions(s = defaultStrategies) {
+  const addIntent = (model, intent) => ({
+    type: actionTypes.ADD_INTENT,
+    model,
+    intent,
+  });
+
+  const clearIntents = (model, intents, options = {}) => ({
+    type: actionTypes.CLEAR_INTENTS,
+    model,
+    intents,
+    options,
+  });
+
   const focus = (model, value, options = {}) => ({
     type: actionTypes.FOCUS,
     model,
@@ -155,6 +168,10 @@ function createFieldActions(s = defaultStrategies) {
   });
 
   const submit = (model, promise, options = {}) => (dispatch, getState) => {
+    if (typeof promise === 'undefined') {
+      return dispatch(addIntent(model, { type: 'submit' }));
+    }
+
     if (options.validate) {
       const form = s.getForm(getState(), model);
 
@@ -262,19 +279,6 @@ function createFieldActions(s = defaultStrategies) {
       errors: true,
     });
 
-  const addIntent = (model, intent) => ({
-    type: actionTypes.ADD_INTENT,
-    model,
-    intent,
-  });
-
-  const clearIntents = (model, intents, options = {}) => ({
-    type: actionTypes.CLEAR_INTENTS,
-    model,
-    intents,
-    options,
-  });
-
   return mapValues({
     blur,
     focus,

src/components/form-component.js

@@ -311,16 +311,6 @@ function createFormClass(s = defaultStrategy) {
 
       mapValues(finalErrorValidators, validateField);
 
-      // const fieldsValidity = mapValues(finalErrorValidators, (validator, field) => {
-      //   const fieldValue = field
-      //     ? s.get(modelValue, field)
-      //     : modelValue;
-
-      //   const fieldValidity = getValidity(validator, fieldValue);
-
-      //   return fieldValidity;
-      // });
-
       dispatch(s.actions.batch(model, [
         s.actions.setFieldsErrors(
           model,

test/field-actions-spec.js

@@ -1488,6 +1488,23 @@ Object.keys(testContexts).forEach((testKey) => {
 
         store.dispatch(action);
       });
+
+      it('should add an intent to submit if no promise if given', (done) => {
+        const store = createTestStore(testCreateStore({
+          testForm: formReducer('test'),
+        }), done);
+
+        store.when(actionTypes.ADD_INTENT, (_, action) => {
+          assert.containSubset(action, {
+            model: 'test',
+            intent: { type: 'submit' },
+          });
+        });
+
+        const action = actions.submit('test');
+
+        store.dispatch(action);
+      });
     });
 
     describe('validate() (thunk)', () => {

test/form-component-spec.js

@@ -1809,5 +1809,33 @@ Object.keys(testContexts).forEach((testKey) => {
         assert.isFalse(store.getState().testForm.$form.submitFailed);
       });
     });
+
+    describe('triggering a submit remotely', () => {
+      const initialState = getInitialState({ foo: '' });
+
+      const store = testCreateStore({
+        test: modelReducer('test', initialState),
+        testForm: formReducer('test', initialState),
+      });
+
+      const handleSubmit = sinon.spy((val) => val);
+
+      TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form
+            model="test"
+            onSubmit={handleSubmit}
+          >
+            <Control model=".foo" />
+          </Form>
+        </Provider>
+      );
+
+      it('should call onSubmit() prop when submit intent is remotely triggered', () => {
+        store.dispatch(actions.submit('test'));
+
+        assert.isTrue(handleSubmit.calledOnce);
+      });
+    });
   });
 });