Merge 4e1855a into 3784cec

README.md

@@ -38,7 +38,7 @@ It does not modify the component class passed to it; instead, it *returns* a new
 
     - `initialModel: Partial<T>` — object provides initial values to the form fields
     - `middleware: (props: T) => any` — function transforms props passed to the wrapped component
-    - `onInputBlur: (e: React.ForcusEvent<any>) => any` — function is called on every blur on an input field within the form. Adding a custom `onBlur` to the input field itself is not recommended, use this method instead
+    - `onInputBlur: (e: React.ForcusEvent<any>, formState?: {form: Partial<IFormState>}) => any` — function is called on every blur of an input field within the form. Adding a custom `onBlur` to the input field itself is not recommended, use this method instead
 
 ## Validation
 

src/FormContainer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { flow, isNil } from 'lodash';
 import * as validation from './validate';
-import { IFormConfig } from './interfaces';
+import { IFormConfig, IFormState } from './interfaces';
 
 const hoistNonReactStatics = require('hoist-non-react-statics');
 
@@ -83,7 +83,9 @@ const makeWrapper = <T extends {}>(config: IFormConfig) => (WrappedComponent: an
             this.setFieldToTouched(target.name as keyof T);
 
             if (config.onInputBlur) {
-                config.onInputBlur(e);
+                config.onInputBlur(e, {
+                    form: this.getFormState()
+                });
             }
         }
 
@@ -103,15 +105,17 @@ const makeWrapper = <T extends {}>(config: IFormConfig) => (WrappedComponent: an
                     }); 
                 }
             }
-        })
+        });
+
+        private getFormState = (): Partial<IFormState> => ({
+            model: this.state.model,
+            inputs: this.state.inputs,
+            touched: this.state.touched
+        });
 
         render() {
             const nextProps = Object.assign({}, this.props, {
-                form: {
-                    model: this.state.model,
-                    inputs: this.state.inputs,
-                    touched: this.state.touched,
-                },
+                form: this.getFormState(),
                 formMethods: {
                     bindInput: this.bindInput,
                     bindToChangeEvent: this.bindToChangeEvent,

src/interfaces.ts

@@ -7,19 +7,21 @@ export type ErrorMessage = {
     [name: string]: string | undefined
 }
 
-export type ValidationRule = <T = any>(prop: keyof T, errorMessage: string, attr?: any) => [
+export type ValidationRule = <T = any>(prop: keyof T, errorMessage?: string, attr?: any) => [
     Validator,
     ErrorMessage
 ];
 
+export interface IFormState {
+    model: any;
+    inputs: any;
+    isValid?: boolean;
+    validationErrors: { [key: string]: string };
+    touched: { [key: string]: boolean };
+}
+
 export interface IFormProps<T = any> {
-    form: {
-        model: any;
-        inputs: any;
-        isValid?: boolean;
-        validationErrors: { [key: string]: string };
-        touched: { [key: string]: boolean };
-    };
+    form: IFormState;
     formMethods: {
         bindInput: (name: string) => any;
         bindToChangeEvent: (e: React.ChangeEvent<any>) => void;
@@ -34,6 +36,9 @@ export interface IFormProps<T = any> {
 
 export interface IFormConfig<T = any> {
     initialModel?: Partial<T>;
-    onInputBlur?: (e: React.FocusEvent<any>) => any;
+    onInputBlur?: (
+        e: React.FocusEvent<any>,
+        formState?: {form: Partial<IFormState>}
+    ) => any;
     middleware?: (props: T) => any;
 }