Merge branch 'master' of https://github.com/bietkul/react-reactive-form

Author: bietkul

README.md

@@ -1,8 +1,22 @@
+<p align="center">
+  <img src="logo.png" alt="React Native Game Engine" height="120" />
+</p>
+
 # React Reactive Forms
 
 [![Build Status](https://travis-ci.org/bietkul/react-reactive-form.svg?branch=master)](https://travis-ci.org/bietkul/react-reactive-form)
 [![NPM Version](https://img.shields.io/npm/v/react-reactive-form.svg?style=flat)](https://www.npmjs.com/package/react-reactive-form)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+<img 
+    alt="gzip size"
+    src="https://img.shields.io/badge/gzip%20size-7.1%20kB-brightgreen.svg"
+  />
+<a href="https://github.com/bietkul/react-reactive-form/pulls">
+    <img
+      alt="PRs welcome"
+      src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"
+    />
+ </a>
 
 It's a library inspired by the [Angular's Reactive Forms](https://angular.io/guide/reactive-forms), which allows to create a tree of form control objects in the component class and bind them with native form control elements.
 
@@ -317,7 +331,10 @@ Its an another performance booster in RRF, it just holds the computation needed
 
 Yes, this library works with react-native also, currently it supports react-native `TextInput` and `Switch` component.
 
+### Note: 
+If you're using react-native then please add the following line of code in `index.js` of your project to avoid error in android devices.
 
+`import "babel-polyfill"`
 
 
 Let's make React Reactive Forms better! If you're interested in helping, all contributions are welcome and appreciated.

docs/GettingStarted.md

@@ -63,7 +63,7 @@ The above example will create an instance of [FormGroup](FormGroup.md) class whi
 
 
 ### step2: Connect form with component
-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.  
+This step 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
@@ -154,7 +154,7 @@ export default class Login extends Component {
 ### Add Listeners
 
 You can add subscriptions for listening the state changes in form.
-There are a total of five observables available currently:
+There are a total of five observables available now:
 
 #### valueChanges
 Emits an event every time when the control's value changes.
@@ -164,7 +164,7 @@ Emits an event every time when the control's state(value, touched, ...) changes.
 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
+#### onBlurChanges
 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.

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()
+  }
+}
+```

logo.png

@@ -1,6 +1,6 @@
 {
   "name": "react-reactive-form",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Angular like Reactive Forms in React",
   "keywords": [
     "forms",
@@ -29,7 +29,9 @@
     "url": "https://github.com/bietkul/react-reactive-form/issues"
   },
   "babel": {
-    "presets": ["es2015"]
+    "presets": [
+      "es2015"
+    ]
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -44,10 +46,13 @@
     "eslint-plugin-react": "^7.5.1",
     "prettier": "^1.8.2",
     "prettier-eslint-cli": "^4.4.2",
-    "react": "^16.1.1"
+    "react": "^16.1.1",
+    "prop-types": "^15.6.0"
   },
   "peerDependencies": {
-    "react": "^15.0.0-0 || ^16.0.0-0"
+    "react": "^15.0.0-0 || ^16.0.0-0",
+    "prop-types": "^15.6.0",
+    "babel-polyfill": "^6.26.0"
   },
   "typings": "./index.d.ts",
   "homepage": "https://github.com/bietkul/react-reactive-form#readme"