Update README.md

Author: Kuldeep Saxena

docs/README.md

@@ -1,4 +1,3 @@
-
 # Getting Started With `react-reactive-form`
 The basic implementation of reactive forms is super easy but it may be helpful to read a brief description of the core form classes.
 * [Abstract Control](api/AbstractControl.md)
@@ -11,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, 
@@ -31,7 +30,7 @@ const loginForm = FormBuilder.group({
 });
 ```
 
-#### Without FormBuilder
+#### Without FormBuilder ( Static Controls )
 
 ```js
 import { FormGroup, FormControl } from "react-reactive-form";
@@ -42,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>
@@ -125,3 +148,84 @@ export default class Login extends Component {
     }
 }
 ```
+
+## Common Operations
+
+### Add Listeners
+
+You can add subscriptions for listening the state changes in form.
+There are a total of five observables available currently:
+
+#### valueChanges
+Emits an event every time when the control's value changes.
+#### stateChanges
+Emits an event every time when the control's state(value, touched, ...) changes.
+#### statusChanges
+Emits an event every time when the control's status(PENDING, INVALID, VALID, DISABLED) changes.
+#### onValueChanges
+Emits an event every time when the control's value is changed by onChange event i.e by user.
+#### onBlurChnages
+Emits an event every time when a blur event triggers on a control.
+
+You can use these listeners to modify the form state dynamically based on the value of other controls.
+
+Example:
+
+#### Disable/Enable a control based on another control's value
+
+```js
+class Form extends Component {
+  myForm = {
+    public: true,
+    images: [[]]
+  }
+  componentDidMount() {
+    this.myForm.get('public').valueChanges.subscribe((value) => {
+      const imagesControl = this.myForm.get('images')
+      if(value) {
+        imagesControl.disable()
+      } else {
+        imagesControl.enable()
+      }
+    })
+  }
+  componentWillUnmount() {
+    this.myForm.get('public').valueChanges.unsubscribe()
+  }
+}
+```
+
+#### Set the value of a control based on another control's value
+
+The following example ensures that one of the control's value must be `true`.
+
+```js
+class Form extends Component {
+  myForm = {
+    showMeMen: true,
+    showMeWomen: true
+  }
+  componentDidMount() {
+    const showMeMenControl = this.myForm.get('showMeMen').unsubscribe()
+    const showMeWomenControl = this.myForm.get('showMeWomen')
+    
+    showMeMenControl.valueChanges.subscribe((value) => {
+      if(!value && !showMeWomenControl.value) {
+        showMeWomenControl.setValue(true)
+      }
+    })
+    
+    showMeWomenControl.valueChanges.subscribe((value) => {
+      if(!value && !showMeMenControl.value) {
+        showMeMenControl.setValue(true)
+      }
+    })
+    
+  }
+  
+  componentWillUnmount() {
+    this.myForm.get('showMeMen').valueChanges.unsubscribe()
+    this.myForm.get('showMeWomen').valueChanges.unsubscribe()
+  }
+}
+```