Update GettingStarted.md

Author: Kuldeep Saxena

docs/GettingStarted.md

@@ -10,9 +10,9 @@ The basic implementation of reactive forms is super easy but it may be helpful t
 ### step 1: Create FormGroup or FormArray
 A form group is a collection object of form controls & form array is the collection array of form controls.
 
-There are two ways to create these:
+There are three ways to create these:
 
-#### With FormBuilder
+#### With FormBuilder ( Static Controls )
 The FormBuilder class helps reduce repetition and clutter by handling details of control creation for you.
 `FormBuilder.group` is a static method that creates a FormGroup. `FormBuilder.group` takes an object whose keys and values are 
 `FormControl` names and their definitions. In this example, the username control is defined by its initial data value, 
@@ -30,7 +30,7 @@ const loginForm = FormBuilder.group({
 });
 ```
 
-#### Without FormBuilder
+#### Without FormBuilder ( Static Controls )
 
 ```js
 import { FormGroup, FormControl } from "react-reactive-form";
@@ -41,79 +41,103 @@ const loginForm = new FormGroup({
 })
 ```
 
+#### Without initializing the controls ( Dynamic Controls )
+
+You can also create controls without even initializing the group control object with the help of new react form components ( [FieldGroup](api/FieldGroup.md), [FieldControl](api/FieldControl.md), [FieldArray](api/FieldArray.md)).
+
+For eg.
+
+```ts
+<FieldGroup
+  render={({ value }) => (
+  <form>
+    <FieldControl
+      name="test"
+      render={({ handler }) => <input {...handler()}/>}
+     />
+     <pre>{value.toString()}</pre>
+  </form>)}
+/>
+```
+The above example will create an instance of [FormGroup](FormGroup.md) class which has a control named `test`.
+
+
 ### step2: Connect form with component
-[Field](api/Field.md) component subscribes a particular control & only update it when it’s or it’s parent’s state changes, which improves the performance by restricting the unnecessary re-rendering of other fields.  
+This steps is not needed if you're using dynamic controls but if you want a better control over your form state then you should do that, if your controls are dynamic then you can also initalize the empty group control and add the controls later.  
+Example:
 
 ```js
 import React, { Component } from 'react';
-import { FormBuilder, Validators, Field } from "react-reactive-form";
+import {
+    FormBuilder,
+    FieldGroup,
+    FieldControl,
+    Validators,
+ } from "react-reactive-form";
 
 export default class Login extends Component {
-    constructor(props) {
-      super(props);
-      // Create the controls
-      this.loginForm = FormBuilder.group({
+    loginForm = FormBuilder.group({
         username: ["", Validators.required],
         password: ["", Validators.required],
         rememberMe: false
       });
     }
-    handleReset=(e) => {
+    handleReset=() => {
         this.loginForm.reset();
-        e.preventDefault();
     }
     handleSubmit=(e) => {
-        console.log("Form values", this.loginForm.value);
         e.preventDefault();
+        console.log("Form values", this.loginForm.value);
     }
     render() {
         return (
-              <Field
+              <FieldGroup
                 control={this.loginForm}
                 render={({ get, invalid }) => (
                   <form onSubmit={this.handleSubmit}>
-                    <Field
-                      control={get("username")}
+                    <FieldControl
+                      name="username"
                       render={({ handler, touched, hasError }) => (
                         <div>
                           <input {...handler()}/>
                           <span>
-                              {touched 
+                              {touched
                               && hasError("required")
                               && "Username is required"}
                           </span>
                         </div>  
                       )}
                     />
-                    <Field
-                      control={get("password")}
+                    <FieldControl
+                      name="password"
                       render={({ handler, touched, hasError }) => (
                         <div>
                           <input {...handler()}/>
                           <span>
-                              {touched 
+                              {touched
                               && hasError("required")
                               && "Password is required"}
                           </span>
                         </div>  
                       )}
                     />
-                    <Field
-                      control={get("rememberMe")}
+                    <FieldControl
+                      name="rememberMe"
                       render={({handler}) => (
                         <div>
                           <input {...handler("checkbox")}/>
                         </div>
                       )}
                     />
-                    <button 
+                    <button
+                      type="button"
                       onClick={this.handleReset}
                     >
                       Reset
                     </button>
                     <button
                       type="submit"
-                      disabled={invalid} 
+                      disabled={invalid}
                     >
                       Submit
                     </button>