Add option to skip validation for controlled form attrs assignment

Description:
- Add `onSet` property to `FormProvider` component of controlled form
functionality. This allows to trigger "set form attributes" action with
additional options. At this point, the only option is `validate`, which
can be used to skip validation when form attributes change in some
way, and form is in "validate on change" state.

README.md

@@ -753,6 +753,39 @@ function OrderEditor() {
 }
 ```
 
+#### `FormProvider` props
+
+- `config` - additional config that will be merged into the one specified in
+  `makeForm` call.
+
+- `attrs` - form attributes that are stored and provided from external source.
+
+- `onChange(attrs)` - function that will be called whenever form attributes
+  are requested to be changed (via `set` function call, for instance).
+
+- `onSet(setAttrs, { attrs, nextAttrs })` - function that will be called whenever
+  `attrs` are assigned to the form from external source. This function received
+  `setAttrs` function as first parameter and `{ attrs, nextAttrs }` object as
+  second one. `setAttrs` function has to be called to complete the sync of external
+  attributes and form attributes. This function can be called with additional _options_
+  object. The only supported option is `validate`:
+
+```jsx
+const onSet = useCallback((setAttrs) => {
+  setAttrs({ validate: false });
+})
+
+return (
+  <FormProvider
+    attrs={attrs}
+    onChange={onChange}
+    onSet={onSet}
+  >
+    <OrderForm />
+  </FormProvider>
+);
+````
+
 #### Additional Helpers
 
 In `makeForm` use-case scenarios there might also be a need in some additional

examples/src/ControlledForm/ControlledForm.jsx

@@ -15,6 +15,20 @@ export default function ControlledForm() {
     setAttrs(attrs);
   }, []);
 
+  const onSet = useCallback((setAttrs, { attrs, nextAttrs }) => {
+    console.log({ attrs, nextAttrs });
+    setAttrs({ validate: false });
+  }, []);
+
+  const addItem = useCallback(() => {
+    setAttrs((attrs) => {
+      return {
+        ...attrs,
+        items: [...attrs.items, {}]
+      };
+    });
+  }, []);
+
   const config = useMemo(() => ({
     helpers: () => ({
       fillForm: () => {
@@ -47,8 +61,11 @@ export default function ControlledForm() {
   }), []);
 
   return (
-    <FormProvider config={config} attrs={attrs} onChange={onChange}>
+    <FormProvider config={config} attrs={attrs} onChange={onChange} onSet={onSet}>
       <OrderForm />
+      <div>
+        <button onClick={addItem}>Add item</button>
+      </div>
     </FormProvider>
   );
 }

src/makeForm.js

@@ -5,7 +5,7 @@ export default function makeForm(mainConfig = {}) {
   const Context = createContext({ attrs: mainConfig.initial });
 
   // eslint-disable-next-line react/prop-types
-  function FormProvider({ config, children, attrs, onChange }) {
+  function FormProvider({ config, children, attrs, onChange, onSet }) {
     if (attrs && !mainConfig.initial) {
       mainConfig.initial = attrs;
     }
@@ -24,9 +24,9 @@ export default function makeForm(mainConfig = {}) {
         _action._processed = true;
         onChange(formAttrs);
       } else if (attrs && attrs !== formAttrs) {
-        setFormAttrs(attrs);
+        onSet((...args) => setFormAttrs(attrs, ...args), { attrs: formAttrs, nextAttrs: attrs });
       }
-    }, [attrs, formAttrs, _action, onChange]);
+    }, [attrs, formAttrs, _action, onChange, onSet]);
 
     return (
       <Context.Provider value={helpers}>
@@ -35,6 +35,10 @@ export default function makeForm(mainConfig = {}) {
     );
   }
 
+  FormProvider.defaultProps = {
+    onSet: (setAttrs) => setAttrs()
+  };
+
   function useContextForm() {
     return useContext(Context);
   }

src/reducer.js

@@ -163,9 +163,9 @@ export default function reducer(state, action) {
       return { ...state, attrs: nextAttrs, errors: compact(nextErrors), isPristine: false, action };
     }
     case 'setFullAttrs': {
-      const { attrs } = action;
+      const { attrs, options = {} } = action;
 
-      if (shouldValidateOnChange) {
+      if (shouldValidateOnChange && options.validate !== false) {
         // When all attributes are set at once and validation should be
         // executed on set, run all validation routines.
         const nextErrors = {};
@@ -299,8 +299,8 @@ export function setAttrs(attrs, prefix) {
   return { type: 'setAttrs', attrs, prefix, isAttrUpdate: true };
 }
 
-export function setFullAttrs(attrs) {
-  return { type: 'setFullAttrs', attrs };
+export function setFullAttrs(attrs, options) {
+  return { type: 'setFullAttrs', attrs, options };
 }
 
 export function validate(path, resolve, reject) {

src/useForm.js

@@ -37,8 +37,8 @@ export function useForm(config = DEFAULT_CONFIG, secondaryConfig) {
   }, []);
 
   // Used in a useEffect to apply external attributes to a form.
-  const setFormAttrs = useCallback((attrs) => {
-    return dispatch(setFullAttrs(attrs));
+  const setFormAttrs = useCallback((attrs, options) => {
+    return dispatch(setFullAttrs(attrs, options));
   }, []);
 
   const validate = useCallback((name) => {

test/useForm.js

@@ -957,5 +957,48 @@ describe('useForm', () => {
       expect(wrapper.find('.address .error')).to.have.lengthOf(1);
       expect(wrapper.find('.items-0 .error')).to.have.lengthOf(1);
     });
+
+    it('allows to skip validation via onSet property', () => {
+      function Page() {
+        const [attrs, setAttrs] = useState({
+          username: 'foo',
+          address: '',
+          guest: false,
+          items: [{}]
+        });
+
+        const addItem = () => {
+          setAttrs({ ...attrs, items: [...attrs.items, {}] });
+        };
+
+        const config = useMemo(() => ({
+          validations: {
+            'items.*.name': 'presence'
+          }
+        }), []);
+
+        const onSet = (setAttrs) => {
+          setAttrs({ validate: false });
+        };
+
+        return (
+          <div>
+            <FormProvider config={config} attrs={attrs} onChange={setAttrs} onSet={onSet}>
+              <OrderForm />
+            </FormProvider>
+            <button className="helper-add-item" onClick={addItem}>Add item</button>
+          </div>
+        );
+      }
+
+      const wrapper = mount(<Page />);
+
+      wrapper.find('.validate').simulate('click');
+      wrapper.find('.helper-add-item').simulate('click');
+
+      expect(wrapper.find('.address .error')).to.have.lengthOf(1);
+      expect(wrapper.find('.items-0 .error')).to.have.lengthOf(1);
+      expect(wrapper.find('.items-1 .error')).to.have.lengthOf(0);
+    });
   });
 });