clear validation rules on unmount

demo/package.json

@@ -12,28 +12,28 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.0.0-beta.51",
-    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.51",
-    "@babel/plugin-proposal-optional-chaining": "^7.0.0-beta.51",
-    "@babel/preset-env": "^7.0.0-beta.51",
-    "@babel/preset-react": "^7.0.0-beta.51",
-    "babel-loader": "^8.0.0-beta.4",
-    "css-loader": "1",
-    "file-loader": "2",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "2.1.1",
+    "file-loader": "3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "nodemon": "^1.17.5",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "style-loader": "0.23.1",
-    "webpack": "^4.15.0",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.4"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
-    "@material-ui/core": "^1.4.0",
-    "@material-ui/icons": "^1.1.0",
-    "node-sass": "^4.9.2",
-    "react-bootstrap": "^0.32.1",
-    "sass-loader": "^7.0.3"
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
+    "node-sass": "^4.11.0",
+    "react-bootstrap": "^0.32.4",
+    "sass-loader": "^7.1.0"
   }
 }

demo/src/constants.js

@@ -3,6 +3,7 @@ import FieldArrayDynamicExample from './examples/FieldArrayDynamicExample';
 import FieldArrayExample from './examples/FieldArrayExample';
 import FormValidationExample from './examples/FormValidationExample';
 import FullFeaturedFormExample from './examples/FullFeaturedFormExample';
+import MountableRequired from './examples/MountableRequiredFormExample';
 import OverviewFormExample from './examples/OverviewFormExample';
 import FieldValidationExample from './examples/FieldValidationExample';
 import RemoteSubmitExample from './examples/RemoteSubmitExample';
@@ -41,6 +42,10 @@ export const EXAMPLE = {
     component : RemoteSubmitExample,
     title     : 'Remote Submit Example'
   },
+  mountableRequired : {
+    component : MountableRequired,
+    title     : 'OnMount Required'
+  },
   materialUI : {
     component : MaterialUIExample,
     title     : 'Material UI'

demo/src/examples/FormValidationExample.js

@@ -48,9 +48,9 @@ class FormValidationExample extends Component {
   render() {
     return (
       <Form onSubmit={this.onSubmit} validate={this.validateForm} layout='horizontal'>
-        <Field name="name" />
-        <Field name="title" />
-        <Field name="age" description="You need to be between 18 and 65."/>
+        <Field name='name' />
+        <Field name='title' />
+        <Field name='age' description='You need to be between 18 and 65.'/>
         <DefaultFooter values={this.state.values} hideSubmission={this.hideSubmission}/>
       </Form>
     );

demo/src/examples/MountableRequiredFormExample.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import { withContextForm } from '../../../src';
+import { Field, Form, FormFooter } from '../../../src/index';
+import { SubmissionResult } from '../utils/helpers';
+
+class MountableRequired extends Component {
+
+  state = {
+    values : null,
+    lastNameShown: true,
+  };
+
+  onSubmit = () => {
+    this.props.contextForm.getForm('mountForm').validateFields().then((result) => {
+      console.log('res', result);
+    });
+  };
+
+  hideSubmission = () => {
+    this.setState({ values : null });
+  };
+
+  render() {
+    const { lastNameShown } = this.state;
+
+    return (
+      <Form onSubmit={this.onSubmit} layout='vertical' name={'mountForm'}>
+        <Field name={'hiddenName'} type={'checkbox'} onChange={(value) => {
+          this.setState({ lastNameShown: !value })
+        }}/>
+        <Field name={'firstName'} placeholder={'e.g. Alex'} required autoComplete={true} />
+        {lastNameShown && <Field name={'lastName'} placeholder={'e.g. Malcovich'} required/>}
+        <FormFooter>
+          <button type={'button'} onClick={this.onSubmit}>Submit</button>
+          <SubmissionResult values={this.state.values} hideSubmission={this.hideSubmission} />
+        </FormFooter>
+      </Form>
+    );
+  }
+}
+
+export default withContextForm(MountableRequired);

demo/src/index.js

@@ -12,7 +12,7 @@ const renderExample = (example, renderId) => {
 };
 window.renderExample = renderExample;
 
-const renderLayout = ReactDOM.render(
-    <LayoutApp />,
-    document.getElementById('root'),
-  );
+ReactDOM.render(
+  <LayoutApp />,
+  document.getElementById('root'),
+);