Skip to content

Commit a951591

Browse files
author
bietkul
committed
2 parents 0fdbe8e + 9acc11c commit a951591

File tree

10 files changed

+190
-193
lines changed

10 files changed

+190
-193
lines changed

‎README.md‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -16,73 +16,10 @@ It's a library inspired by the [Angular's Reactive Forms](https://angular.io/gui
1616
npm install react-reactive-form --save
1717
```
1818
# Basic Example
19-
```js
20-
import React, { Component } from 'react';
21-
import { FormBuilder, Validators, reactiveForm } from "react-reactive-form";
22-
23-
// Create the controls
24-
const loginForm = FormBuilder.group({
25-
username: ['', Validators.required],
26-
password: ['', Validators.required],
27-
rememberMe: false
28-
});
29-
30-
class Login extends Component {
31-
handleReset=(e) => {
32-
loginForm.reset();
33-
e.preventDefault();
34-
}
35-
handleSubmit=(e) => {
36-
console.log("Form values", loginForm.value);
37-
e.preventDefault();
38-
}
39-
render() {
40-
const {
41-
username,
42-
password,
43-
rememberMe
44-
} = this.props;
45-
return (
46-
<form onSubmit={this.handleSubmit}>
47-
<div>
48-
<input {...username.handler()}/>
49-
<span>
50-
{username.touched
51-
&& username.hasError('required')
52-
&& "Username is required"}
53-
</span>
54-
</div>
55-
<div>
56-
<input {...password.handler()}/>
57-
<span>
58-
{password.touched
59-
&& password.hasError('required')
60-
&& "Password is required"}
61-
</span>
62-
</div>
63-
<div>
64-
<input {...rememberMe.handler('checkbox')}/>
65-
</div>
66-
<button onClick={this.handleReset}>Reset</button>
67-
<button disabled={loginForm.invalid} type="submit">Submit</button>
68-
</form>
69-
);
70-
}
71-
}
72-
// React HOC to connect form with component.
73-
export default reactiveForm(Login, loginForm);
74-
```
75-
76-
### Note:
77-
While working with larger forms, deep nested forms & [Form Array’s](docs/api/FormArray.md) it’s highly recommended to use the [Field](docs/api/Field.md) component instead of `reactiveForm` method.
78-
79-
`Field` component subscribes a particular control & only update it when it’s or it’s parent’s state changes, which of course reduces the re-rendering and boost the performance significantly.
80-
8119

8220
```js
8321
import React, { Component } from 'react';
8422
import { FormBuilder, Validators, Field } from "react-reactive-form";
85-
import { AbstractControl } from "react-reactive-form";
8623

8724
export default class Login extends Component {
8825
constructor(props) {
@@ -169,6 +106,7 @@ Try out `react-reactive-forms` in these sandbox versions of the Examples.
169106
* [Sync & Async Validation](https://codesandbox.io/s/qq8xq7j2w)
170107
* [User Registeration Form With Nested Forms](https://codesandbox.io/s/p2rqmr8qk7)
171108
* [Form Array With Dynamic Controls](https://codesandbox.io/s/nw9wxw2nvl)
109+
* [Update On Submit](https://codesandbox.io/s/3qk1ly16j1)
172110

173111
Let's make React Reactive Forms better! If you're interested in helping, all contributions are welcome and appreciated.
174112

‎docs/GettingStarted.md‎

Lines changed: 13 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,6 @@ The basic implementation of reactive forms is super easy but it may be helpful t
55
* [Form Array](api/FormArray.md)
66
* [Form Control](api/FormControl.md)
77
* [Form Builder](api/FormBuilder.md)
8-
## Overview
9-
There are two ways to connect your components to reactive-form.
10-
11-
### By using `reactiveForm`
12-
You can use the [`reactiveForm`](api/ReactiveForm.md) method. It returns a higher order component
13-
which regulary provides control(mapped) props to your component.
14-
```ts
15-
reactiveForm(ReactComponent: React.SFC|React.ComponentClass<any>, form: FormGroup|FormArray):React.ComponentClass<any>
16-
```
17-
18-
### By using `Field` ( recommended )
19-
20-
For better performance with large forms & [Form Array’s](api/FormArray.md) it’s highly recommended to use the [Field](api/Field.md) component instead of `reactiveForm` method.
21-
22-
`Field` component subscribes a particular control & only update it when it’s or it’s parent’s state changes, which of course reduces the re-rendering and boost the performance significantly.
23-
248

259
## Basic Usage Guide
2610
### step 1: Create FormGroup or FormArray
@@ -58,100 +42,34 @@ const loginForm = new FormGroup({
5842
```
5943

6044
### step2: Connect form with component
61-
62-
### With `reactiveForm`
63-
64-
Use the `reactiveForm` method to connect your form group or array to the Component in which you want to use input handlers.
65-
Now you'll start receiving the [mapped control props](api/Props.md) with input handlers.
66-
67-
In below given example `username.handler` is a function which binds the input element to the `username` control.
68-
69-
```js
70-
import React, { Component } from 'react';
71-
import { FormBuilder, Validators, reactiveForm } from "./react-reactive-form";
72-
73-
// Create the controls
74-
const loginForm = FormBuilder.group({
75-
username: ['', Validators.required],
76-
password: ['', Validators.required],
77-
rememberMe: false
78-
});
79-
80-
class Login extends Component {
81-
handleReset=(e) => {
82-
loginForm.reset();
83-
e.preventDefault();
84-
}
85-
handleSubmit=(e) => {
86-
console.log("Form values", loginForm.value);
87-
e.preventDefault();
88-
}
89-
render() {
90-
const {
91-
username,
92-
password,
93-
rememberMe
94-
} = this.props;
95-
return (
96-
<form onSubmit={this.handleSubmit}>
97-
<div>
98-
<input {...username.handler()}/>
99-
<span>
100-
{username.touched
101-
&& username.hasError('required')
102-
&& "Username is required"}
103-
</span>
104-
</div>
105-
<div>
106-
<input {...password.handler()}/>
107-
<span>
108-
{password.touched
109-
&& password.hasError('required')
110-
&& "Password is required"}
111-
</span>
112-
</div>
113-
<div>
114-
<input {...rememberMe.handler('checkbox')}/>
115-
</div>
116-
<button onClick={this.handleReset}>Reset</button>
117-
<button type="submit">Submit</button>
118-
</form>
119-
);
120-
}
121-
}
122-
// React HOC to connect form with component.
123-
export default reactiveForm(Login, loginForm);
124-
125-
```
126-
127-
### With `Field`
128-
[Field](api/Field.md) subscribes the component to a particular control's state changes which improves the performance by restricting the re-rendering of other fields.
45+
[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.
12946

13047
```js
13148
import React, { Component } from 'react';
13249
import { FormBuilder, Validators, Field } from "react-reactive-form";
133-
import { AbstractControl } from "react-reactive-form";
134-
135-
// Create the controls
136-
const loginForm = FormBuilder.group({
137-
username: ["", Validators.required],
138-
password: ["", Validators.required],
139-
rememberMe: false
140-
});
14150

14251
export default class Login extends Component {
52+
constructor(props) {
53+
super(props);
54+
// Create the controls
55+
this.loginForm = FormBuilder.group({
56+
username: ["", Validators.required],
57+
password: ["", Validators.required],
58+
rememberMe: false
59+
});
60+
}
14361
handleReset=(e) => {
144-
loginForm.reset();
62+
this.loginForm.reset();
14563
e.preventDefault();
14664
}
14765
handleSubmit=(e) => {
148-
console.log("Form values", loginForm.value);
66+
console.log("Form values", this.loginForm.value);
14967
e.preventDefault();
15068
}
15169
render() {
15270
return (
15371
<Field
154-
control={loginForm}
72+
control={this.loginForm}
15573
render={({ get, invalid }) => (
15674
<form onSubmit={this.handleSubmit}>
15775
<Field

‎docs/api/FormArray.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ controls: AbstractControl[]
5959
```
6060
##
6161
```ts
62+
submitted: boolean
63+
```
64+
A form is submitted if the `handleSubmit` function has been called on it.
65+
##
66+
```ts
6267
at(index: number): AbstractControl
6368
```
6469
Get the [AbstractControl](AbstractControl.md) at the given index in the array.
@@ -177,14 +182,14 @@ Otherwise, the `value` property is the best way to get the `value` of the array.
177182

178183
##
179184
```ts
180-
onSubmit():void
185+
handleSubmit():void
181186
```
182187
Submit action, can be used to tell the form that it has been submitted.
183188
Useful when `updateOn` property is `submit`.
184189

185190
Example
186191
```ts
187-
<form onSubmit={this.form.onSubmit}/>
192+
<form onSubmit={this.form.handleSubmit}/>
188193
```
189194
<br/></br>
190195
Note: This document is a derivative of ["Form Array Document"](https://angular.io/api/forms/FormArray) by Google,

‎docs/api/FormControl.md‎

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,9 +118,113 @@ Function needs to be called whenever a blur event triggers.
118118
```ts
119119
handler: (inputType?: InputType, value?: string) => Handler;
120120
```
121-
Returns the props required to bind a control with an input element.
121+
Returns the props required to bind a control to a native input element.
122122

123-
For more details see the handler section of [props](Props.md).
123+
Note:
124+
* `inputType` parameter is required for `checkbox`, `radio` and `switch`( React Native ) components.
125+
* `value` parameter only can be used for `radio` buttons to assign a value to a particular button.
126+
127+
Example
128+
129+
```ts
130+
<input type="text" {...username.handler()}/>
131+
```
132+
Binds a `text` input.
133+
##
134+
```ts
135+
<input type="date" {...birthday.handler()}/>
136+
```
137+
Binds a `date` input.
138+
##
139+
```ts
140+
<input {...terms.handler("checkbox")}/>
141+
```
142+
Binds a `checkbox` input.
143+
##
144+
```ts
145+
<input {...gender.handler('radio', 'male')}/> Male
146+
<input {...gender.handler('radio', 'female')}/> Female
147+
<input {...gender.handler('radio', 'other')}/> Other
148+
```
149+
Binds a `radio` input.
150+
##
151+
```ts
152+
<TextInput {...username.handler()}/>
153+
```
154+
Binds a React Native `TextInput` component.
155+
##
156+
```ts
157+
<Switch {...terms.handler('switch')}/>
158+
```
159+
Binds a React Native `Switch` component.
160+
161+
##
162+
A `handler` object can have these properties:
163+
164+
```ts
165+
value: any;
166+
```
167+
Sometimes this value can be different from the actual value of `control`.
168+
169+
For example, if the `updateOn` property is `blur` or `submit` than the value property of handler will be `_pendingValue`
170+
of the control.
171+
172+
The `_pendingValue` is the value of a control which is not validated yet which means the actual value of the
173+
control is different.
174+
175+
So, this `value` is just to control the input element, for actual value of the control you can use the `value` property
176+
of the mapped control prop.
177+
##
178+
```ts
179+
onChange: (e: any) => void;
180+
```
181+
Function needs to be called whenever a value change event triggers.
182+
##
183+
```ts
184+
onBlur: (e: any) => void;
185+
```
186+
Function needs to be called whenever a `blur` event triggers.
187+
##
188+
```ts
189+
disabled: boolean;
190+
```
191+
Tells the input element about the `disabled` status.
192+
##
193+
```ts
194+
checked?: boolean;
195+
```
196+
Checked property for `checkbox` and `radio` buttons.
197+
##
198+
```ts
199+
editable?: boolean;
200+
```
201+
React Native uses `editable` property to tell the `TextInput` about the `enabled` status.
202+
##
203+
```ts
204+
type?: string;
205+
```
206+
Returns the type of input element in case of `checkbox` & `radio` buttons.
207+
208+
209+
Although `handler` works well with all kind of inputs, you can also bind your custom input
210+
components.
211+
212+
Example
213+
214+
```ts
215+
<Field
216+
control={myForm.get('birthday')}
217+
render={({ onChange, value }) => (
218+
<DatePickerIOS
219+
date={value}
220+
dateForm="MM/DD/YYYY"
221+
onDateChange={onChange}
222+
/>
223+
)}
224+
/>
225+
```
226+
227+
Binds a React Native `DatePickerIOS` component.
124228
125229
Note: This document is a derivative of ["Form Control Document"](https://angular.io/api/forms/FormControl) by Google,
126230
under [CC BY](https://creativecommons.org/licenses/by/4.0/).

‎docs/api/FormGroup.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,11 @@ controls: {
6767
```
6868
##
6969
```ts
70+
submitted: boolean
71+
```
72+
A form is submitted if the `handleSubmit` function has been called on it.
73+
##
74+
```ts
7075
registerControl(name: string, control: AbstractControl): AbstractControl
7176
```
7277
Registers a control with the group's list of controls.
@@ -187,14 +192,14 @@ Otherwise, the value property is the best way to get the value of the group.
187192

188193
##
189194
```ts
190-
onSubmit():void
195+
handleSubmit():void
191196
```
192197
Submit action, can be used to tell the form that it has been submitted.
193-
Useful when `updateOn` property is `submit`.
198+
Useful when `updateOn` property is `handleSubmit`.
194199

195200
Example
196201
```ts
197-
<form onSubmit={this.form.onSubmit}/>
202+
<form onSubmit={this.form.handleSubmit}/>
198203
```
199204

200205
<br/></br>

0 commit comments

Comments
 (0)