Improve form valid state (#95)

* feat(form): Allow invalidating the form with `updateInputsWithError` * fix(form): Setting `validationErrors` prop invalidates the form * test(form): Add form valid state tests
formsy · May 28, 2019 · 9518834 · 9518834
1 parent c4a44f9
commit 9518834
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 24 deletions.
diff --git a/API.md b/API.md
@@ -195,7 +195,7 @@ class MyForm extends React.Component {
     this.refs.form.updateInputsWithError({
       email: 'This email is taken',
       'field[10]': 'Some error!'
-    });
+    }, true);
   }
   render() {
     return (
@@ -207,7 +207,7 @@ class MyForm extends React.Component {
 }
 ```
 
-Manually invalidate the form by taking an object that maps to inputs. This is useful for server side validation. You can also use a third parameter to the [`onSubmit`](#onSubmit), [`onValidSubmit`](#onValid) or [`onInvalidSubmit`](#onInvalid).
+Manually set the form fields validation errors by taking an object that maps field name to error message as the first argument and optionally invalidate the form by passing `true` as the second argument. This is useful for server side validation. This is also passed as the third parameter to the [`onSubmit`](#onSubmit), [`onValidSubmit`](#onValid) or [`onInvalidSubmit`](#onInvalid).
 
 #### <a id="preventExternalInvalidation">preventExternalInvalidation</a>
 

diff --git a/lib/index.js b/lib/index.js
@@ -142,6 +142,21 @@ var Formsy = function (_React$Component) {
         }];
         component.setState.apply(component, args);
       });
+      if (!_this.props.preventExternalInvalidation && _this.state.isValid) {
+        _this.setFormValidState(false);
+      }
+    };
+
+    _this.setFormValidState = function (allIsValid) {
+      _this.setState({
+        isValid: allIsValid
+      });
+
+      if (allIsValid) {
+        _this.props.onValid();
+      } else {
+        _this.props.onInvalid();
+      }
     };
 
     _this.isFormDisabled = function () {
@@ -281,7 +296,7 @@ var Formsy = function (_React$Component) {
       }
     };
 
-    _this.updateInputsWithError = function (errors) {
+    _this.updateInputsWithError = function (errors, invalidate) {
       Object.keys(errors).forEach(function (name) {
         var component = _utils2.default.find(_this.inputs, function (input) {
           return input.props.name === name;
@@ -295,6 +310,9 @@ var Formsy = function (_React$Component) {
         }];
         component.setState.apply(component, args);
       });
+      if (invalidate && _this.state.isValid) {
+        _this.setFormValidState(false);
+      }
     };
 
     _this.validate = function (component) {
@@ -322,15 +340,7 @@ var Formsy = function (_React$Component) {
           return component.state.isValid;
         });
 
-        _this.setState({
-          isValid: allIsValid
-        });
-
-        if (allIsValid) {
-          _this.props.onValid();
-        } else {
-          _this.props.onInvalid();
-        }
+        _this.setFormValidState(allIsValid);
 
         // Tell the form that it can start to trigger change events
         _this.setState({