Update FormGenerator.md

Author: Kuldeep Saxena

docs/api/FormGenerator.md

@@ -1,24 +1,40 @@
 
 # FormGenerator
-A react component which generates a tree of control objects or can be append to an existing control tree & renders the associated React components in the same order.
+A react component which generates a tree of control objects & render the UI by keeping the same order in which the controls have been defined in `fieldConfig`.
 
 ## How it works
- - It creates a new instance of [FormGroup](FormGroup.md) ( if `controls` property is an object ) or [FormArray]
-   (FormArray.md) ( if `controls` property is an array ).
- - It renders the UI of the form according to associated components to the controls by keeping the same order in which they    have been defined in `fieldConfig`.
+ - It creates a new instance of [FormGroup](FormGroup.md) ( if `controls` property is an object ) or 
+  [FormArray](FormArray.md) ( if `controls` property is an array ) if the `control` property is not supplied.
+ - It renders the form UI according to the control-component mapping by keeping the same order in which they have been
+   defined in `fieldConfig`.
  - You can define a parent control by passing the `parent` property.
  - If a `control` prop is defined then it just returns the same.
 
 
 ## Props
+##
+```ts
+onMount: (form: FormGroup|FormArray) => void 
+```
+A function callback called when a form has been rendered, the basic use case is to save the form instance for further uses.
+## 
+```ts
+onUnmount: () => void
+```
+A function callback called when a form has been unmounted.
+## 
+```ts
+fieldConfig: {[key: string]: any}
+```
+Field config has a set of properties which are required for the form configuration.
 
-## fieldConfig
-
-Checkout these properties of controls
+### Properties of `fieldConfig` 
 ```ts
 controls: Array<{[key: string]: any}> | {[key: string]: any};
 ```
-Controls as an object
+FormGenerator creates a [FormGroup](FormGroup.md) if the `controls` property is an object.
+
+For example the following config will create a [FormGroup](FormGroup.md) with two form controls named `username` & `password` respectively.
 ```ts
 const fieldConfig = {
   controls: {
@@ -31,7 +47,11 @@ const fieldConfig = {
   }
 }
 ```
-Controls as an array
+
+FormGenerator creates a [FormArray](FormArray.md) if the `controls` property is an array.
+
+For example the following config will create a [FormArray](FormArray.md) with two form controls at index `0` & `1` respectively.
+
 ```ts
 const fieldConfig = {
   controls: [
@@ -44,7 +64,11 @@ const fieldConfig = {
   ]
 }
 ```
-Nested Controls in object
+
+#### Nested Controls
+You can also define the nested controls in the same way.
+
+Example: Nested controls in `FormGroup`
 ```ts
 const fieldConfig = {
   controls: {
@@ -61,8 +85,17 @@ const fieldConfig = {
   }
 }
 ```
+The above example will create a structure like that:
+```ts
+{
+  address: {
+    city: "",
+    country: ""
+  }
+}
+```
 
-Nested Controls In array
+Example: Nested controls in `FormArray`
 
 ```ts
 const fieldConfig = {
@@ -84,43 +117,110 @@ const fieldConfig = {
   ]
 }
 ```
+The above example will create a structure like that:
+```ts
+[
+  {
+    itemName: "",
+    itemPrice: ""
+  },
+  "" // item2
+]
+```
 ##
-
 ```ts
 formState: any|{ value: any, disabled: boolean }
 ```
 You can use this prop to define the initial state of the control.
+### Note:
+Only works with [FormControl](FormControl.md)
+
 ##
 ```ts
 meta: {[key: string]: any};
 ```
+You can pass an object of custom inputs to customize your component.
+
 ##
-You can pass an object of custom variables to customize your component.
 ```ts
     render: (control: FormArray|FormControl|FormGroup) => React.ReactElement<any>|React.ReactElement<any>[];
 ```
 A render function prop which returns a react component which needs to be re-render whenever the control state changes.
-You can also pass a render function as a child.
 
-##
+### Note:
+Only works with [FormControl](FormControl.md)
+
+For example: 
 ```ts
-control: AbstractControl;
+const fieldConfig = {
+  controls: {
+    username: {
+      render: TextInput // some react component to render an input,
+      meta: {
+        label: "Username"
+      }
+    },
+    password: {
+      render: TextInput,
+      meta: {
+        label: "Password",
+        type: "password"
+      }
+    }
+  }
+}
 ```
-An instance of [AbstractControl](AbstractControl.md) control.
-
 ##
 
 ```ts
 index: number
 ```
 To define at which index the controls has to be inserted if the parent control is an instance of [FormArray](FormArray.md).
 
+### Note:
+Only works if the parent is [FormArray](FormArray.md).
+
 ##
 ```ts
 options: AbstractControlOptions;
 ```
 You can pass the [AbstractControlOptions](AbstractControlOptions.md) as `options` props.
 
+For example: 
+```ts
+const fieldConfig = {
+  controls: {
+    username: {
+      render: TextInput // some react component to render an input,
+      meta: {
+        label: "Username"
+      }
+      options: {
+        validators: Validators.required,
+        updateOn: 'blur'
+      }
+    },
+    password: {
+      render: TextInput,
+      meta: {
+        label: "Password",
+        type: "password"
+      },
+      options: {
+        validators: Validators.required,
+      }
+    }
+  }
+}
+```
+
+
+##
+```ts
+control: AbstractControl;
+```
+An instance of [AbstractControl](AbstractControl.md) control.
+
 ##
 ```ts
 parent: AbstractControl;