I136 fix validation behavior on load

README.md

@@ -102,6 +102,34 @@ import RcSelect from 'react-schema-form-rc-select/lib/RcSelect';
 
 ```
 
+# Error Handler
+
+The error handler is disabled by default but you can enable it by using showErrors prop on `SchemaForm`.
+
+```js
+...
+onValidate = () => {
+    if (form is valid) {
+        ...
+    } else {
+        this.setState({ showErrors: true });
+    }
+}
+
+...
+    <>
+        <SchemaForm
+            schema={schemaObject}
+            form={formObject}
+            model={modelObject}
+            onModelChange={this.onModelChange}
+            mapper={mapperObject}
+            showErrors={this.state.showErrors}
+        />
+        <Button onClick={this.validate}>Submit</Button>
+    </>
+```
+
 
 # Contributing
 

example/ExamplePage.js

@@ -17,7 +17,11 @@ const examples = {
     localizer: Localizer
 };
 
-class ExamplePage extends React.Component {
+type State = {
+    showErrors: boolean
+};
+
+class ExamplePage extends React.Component<void, State> {
     tempModel = {
         comments: [
             {
@@ -63,7 +67,8 @@ class ExamplePage extends React.Component {
         schemaJson: "",
         formJson: "",
         selected: "",
-        localization: undefined
+        localization: undefined,
+        showErrors: false
     };
 
     setStateDefault = () => this.setState({ model: this.tempModel });
@@ -76,7 +81,8 @@ class ExamplePage extends React.Component {
                 selected: "",
                 schema: {},
                 model: {},
-                form: []
+                form: [],
+                showErrors: false
             });
         }
 
@@ -89,7 +95,8 @@ class ExamplePage extends React.Component {
                 schema: elem.schema,
                 model: elem.model || {},
                 form: elem.form,
-                localization: elem.localization
+                localization: elem.localization,
+                showErrors: false
             });
         } else {
             fetch(value)
@@ -101,7 +108,8 @@ class ExamplePage extends React.Component {
                         selected: value,
                         schema,
                         model: model || {},
-                        form
+                        form,
+                        showErrors: false
                     });
                 });
         }
@@ -117,7 +125,7 @@ class ExamplePage extends React.Component {
     onValidate = () => {
         const { schema, model } = this.state;
         const result = utils.validateBySchema(schema, model);
-        this.setState({ validationResult: result });
+        this.setState({ validationResult: result, showErrors: true });
     };
 
     onFormChange = val => {
@@ -148,7 +156,8 @@ class ExamplePage extends React.Component {
             tests,
             formJson,
             schemaJson,
-            localization
+            localization,
+            showErrors
         } = this.state;
         const mapper = {
             // 'rc-select': RcSelect
@@ -166,6 +175,7 @@ class ExamplePage extends React.Component {
                         mapper={mapper}
                         model={model}
                         localization={localization}
+                        showErrors={showErrors}
                     />
                 </ErrorBoundary>
             );

src/ComposedComponent.js

@@ -24,23 +24,39 @@ export default (ComposedComponent, defaultProps = {}) =>
     class Composed extends React.Component {
         constructor(props) {
             super(props);
-            const { errorText, form } = this.props;
+            const { errorText, form, showErrors } = this.props;
             this.onChangeValidate = this.onChangeValidate.bind(this);
             const value = defaultValue(this.props);
             const validationResult = utils.validate(form, value);
-            this.state = {
-                value,
-                valid: !!(validationResult.valid || !value),
-                error:
-                    (!validationResult.valid &&
-                        (value ? validationResult.error.message : null)) ||
-                    errorText
-            };
+            if (!showErrors) {
+                this.state = {
+                    value,
+                    valid: true,
+                    error: ""
+                };
+            } else {
+                this.state = {
+                    value,
+                    valid: !!(validationResult.valid || !value),
+                    error:
+                        (!validationResult.valid &&
+                            (value ? validationResult.error.message : null)) ||
+                        errorText
+                };
+            }
         }
 
         static getDerivedStateFromProps(nextProps) {
             const value = defaultValue(nextProps);
+            const { showErrors } = nextProps;
             const validationResult = utils.validate(nextProps.form, value);
+            if (!showErrors) {
+                return {
+                    value,
+                    valid: true,
+                    error: ""
+                };
+            }
             return {
                 value,
                 valid: validationResult.valid,

src/SchemaForm.js

@@ -31,7 +31,8 @@ type Props = {
     model: any,
     className: any,
     mapper: any,
-    localization?: Localization
+    localization?: Localization,
+    showErrors?: boolean
 };
 
 const formatDate = (date: string | Date) => {
@@ -45,7 +46,8 @@ const formatDate = (date: string | Date) => {
 
 class SchemaForm extends Component<Props> {
     static defaultProps = {
-        localization: undefined
+        localization: undefined,
+        showErrors: false
     };
 
     mapper = {
@@ -106,7 +108,7 @@ class SchemaForm extends Component<Props> {
     };
 
     builder(form, model, index, mapper, onChange, builder) {
-        const { errors } = this.props;
+        const { errors, showErrors } = this.props;
         const Field = this.mapper[form.type];
         if (!Field) {
             return null;
@@ -135,6 +137,7 @@ class SchemaForm extends Component<Props> {
                 builder={builder}
                 errorText={error}
                 localization={this.getLocalization()}
+                showErrors={showErrors}
             />
         );
     }

src/__tests__/ComposedComponent-test.js

@@ -56,7 +56,12 @@ describe("ComposedComponent", () => {
         const Composed = ComposedComponent(Text);
 
         renderer.render(
-            <Composed form={cfg.form} model={cfg.model} mapper={cfg.mapper} />
+            <Composed
+                form={cfg.form}
+                model={cfg.model}
+                mapper={cfg.mapper}
+                showErrors
+            />
         );
 
         const result = renderer.getRenderOutput();