Skip to content

Commit 21891f0

Browse files
author
bietkul
committed
Merge Resolved
2 parents 3e29e25 + 687f05c commit 21891f0

File tree

5 files changed

+553
-27
lines changed

5 files changed

+553
-27
lines changed

‎README.md‎

Lines changed: 176 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,38 @@
11
# React Reactive Forms
2+
23
[![Build Status](https://travis-ci.org/bietkul/react-reactive-form.svg?branch=master)](https://travis-ci.org/bietkul/react-reactive-form)
34
[![NPM Version](https://img.shields.io/npm/v/react-reactive-form.svg?style=flat)](https://www.npmjs.com/package/react-reactive-form)
45

56
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.
7+
68
# Features
7-
- UI independent.
8-
- Zero dependencies.
9-
- Nested forms.
10-
- Subscribers for value & status changes of controls.
11-
- Provides a set of validators & also supports custom sync & async validators.
12-
- Better form management with `FormGroup` & `FormArray` apis.
13-
- Customizable update strategy for better performace with large forms.
14-
# Installation
9+
10+
* UI independent.
11+
* Zero dependencies.
12+
* Nested forms.
13+
* Subscribers for value & status changes of controls.
14+
* Provides a set of validators & also supports custom sync & async validators.
15+
* Better form management with `FormGroup` & `FormArray` apis.
16+
* Customizable update strategy for better performace with large forms.
17+
# Installation
18+
1519
```sh
1620
npm install react-reactive-form --save
1721
```
22+
1823
# Basic Example
1924

2025
```js
2126
import React, { Component } from 'react';
22-
import { FormBuilder, Validators, Field } from "react-reactive-form";
27+
import {
28+
FormBuilder,
29+
FieldGroup,
30+
FieldControl,
31+
Validators,
32+
} from "react-reactive-form";
2333

2434
export default class Login extends Component {
25-
constructor(props) {
26-
super(props);
27-
// Create the controls
28-
this.loginForm = FormBuilder.group({
35+
loginForm = FormBuilder.group({
2936
username: ["", Validators.required],
3037
password: ["", Validators.required],
3138
rememberMe: false
@@ -40,53 +47,53 @@ export default class Login extends Component {
4047
}
4148
render() {
4249
return (
43-
<Field
50+
<FieldGroup
4451
control={this.loginForm}
4552
render={({ get, invalid }) => (
4653
<form onSubmit={this.handleSubmit}>
47-
<Field
48-
control={get("username")}
54+
<FieldControl
55+
name="username"
4956
render={({ handler, touched, hasError }) => (
5057
<div>
5158
<input {...handler()}/>
5259
<span>
53-
{touched
60+
{touched
5461
&& hasError("required")
5562
&& "Username is required"}
5663
</span>
5764
</div>
5865
)}
5966
/>
60-
<Field
61-
control={get("password")}
67+
<FieldControl
68+
name="password"
6269
render={({ handler, touched, hasError }) => (
6370
<div>
6471
<input {...handler()}/>
6572
<span>
66-
{touched
73+
{touched
6774
&& hasError("required")
6875
&& "Password is required"}
6976
</span>
7077
</div>
7178
)}
7279
/>
73-
<Field
74-
control={get("rememberMe")}
80+
<FieldControl
81+
name="rememberMe"
7582
render={({handler}) => (
7683
<div>
7784
<input {...handler("checkbox")}/>
7885
</div>
7986
)}
8087
/>
8188
<button
82-
type="button"
89+
type="button"
8390
onClick={this.handleReset}
8491
>
8592
Reset
8693
</button>
8794
<button
8895
type="submit"
89-
disabled={invalid}
96+
disabled={invalid}
9097
>
9198
Submit
9299
</button>
@@ -97,16 +104,158 @@ export default class Login extends Component {
97104
}
98105
}
99106
```
107+
108+
## Add Dynamic Control
109+
110+
You can also create dynamic controls without even initializing the group control object with the help of new react form components ( [FieldGroup](docs/api/FieldGroup.md), [FieldControl](docs/api/FieldControl.md), [FieldArray](docs/api/FieldArray.md)).
111+
112+
```js
113+
import React, { Component } from 'react'
114+
import { FieldGroup, FieldControl, Validators } from 'react-reactive-form'
115+
116+
export default class Login extends Component {
117+
handleSubmit = (e, value) => {
118+
console.log('Form values', value)
119+
e.preventDefault()
120+
}
121+
render() {
122+
return (
123+
<FieldGroup
124+
render={({ get, invalid, reset, value }) => (
125+
<form onSubmit={e => this.handleSubmit(e, value)}>
126+
<FieldControl
127+
name="username"
128+
options={{ validators: Validators.required }}
129+
render={({ handler, touched, hasError }) => (
130+
<div>
131+
<input {...handler()} />
132+
<span>
133+
{touched && hasError('required') && 'Username is required'}
134+
</span>
135+
</div>
136+
)}
137+
/>
138+
<FieldControl
139+
name="password"
140+
options={{ validators: Validators.required }}
141+
render={({ handler, touched, hasError }) => (
142+
<div>
143+
<input {...handler()} />
144+
<span>
145+
{touched && hasError('required') && 'Password is required'}
146+
</span>
147+
</div>
148+
)}
149+
/>
150+
<FieldControl
151+
name="rememberMe"
152+
render={({ handler }) => (
153+
<div>
154+
<input {...handler('checkbox')} />
155+
</div>
156+
)}
157+
/>
158+
<button type="button" onClick={() => reset()}>
159+
Reset
160+
</button>
161+
<button type="submit" disabled={invalid}>
162+
Submit
163+
</button>
164+
</form>
165+
)}
166+
/>
167+
)
168+
}
169+
}
170+
```
171+
172+
<b>So, it's not mandatory that you need to define your control separately but if you want better control then you should do that, if your controls are dynamic then you can also initalize the empty group control and add the controls later.
173+
See the example:</b>
174+
175+
```js
176+
import React, { Component } from 'react'
177+
import {
178+
FormBuilder,
179+
FieldGroup,
180+
FieldControl,
181+
Validators
182+
} from 'react-reactive-form'
183+
184+
export default class Login extends Component {
185+
// Initialize the empty group control
186+
loginForm = FormBuilder.group({})
187+
188+
handleReset = e => {
189+
this.loginForm.reset()
190+
}
191+
handleSubmit = e => {
192+
console.log('Form values', this.loginForm.value)
193+
e.preventDefault()
194+
}
195+
render() {
196+
return (
197+
<FieldGroup
198+
control={this.loginForm}
199+
render={({ get, invalid, reset, value }) => (
200+
<form onSubmit={this.handleSubmit}>
201+
<FieldControl
202+
name="username"
203+
options={{ validators: Validators.required }}
204+
render={({ handler, touched, hasError }) => (
205+
<div>
206+
<input {...handler()} />
207+
<span>
208+
{touched && hasError('required') && 'Username is required'}
209+
</span>
210+
</div>
211+
)}
212+
/>
213+
<FieldControl
214+
name="password"
215+
options={{ validators: Validators.required }}
216+
render={({ handler, touched, hasError }) => (
217+
<div>
218+
<input {...handler()} />
219+
<span>
220+
{touched && hasError('required') && 'Password is required'}
221+
</span>
222+
</div>
223+
)}
224+
/>
225+
<FieldControl
226+
name="rememberMe"
227+
render={({ handler }) => (
228+
<div>
229+
<input {...handler('checkbox')} />
230+
</div>
231+
)}
232+
/>
233+
<button type="button" onClick={this.handleReset}>
234+
Reset
235+
</button>
236+
<button type="submit" disabled={invalid}>
237+
Submit
238+
</button>
239+
</form>
240+
)}
241+
/>
242+
)
243+
}
244+
}
245+
```
246+
100247
# Documentation
101-
* [Getting Started](docs/GettingStarted.md)
248+
249+
* [Getting Started](docs)
102250
* [API](docs/api/)
103-
# Code Sandboxes
104-
Try out `react-reactive-forms` in these sandbox versions of the Examples.
251+
# Code Sandboxes
252+
Try out `react-reactive-forms` in these sandbox versions of the Examples.
105253
* [Simple Form](https://codesandbox.io/s/4rxokpr270)
106254
* [Sync & Async Validation](https://codesandbox.io/s/qq8xq7j2w)
107255
* [User Registeration Form With Nested Forms](https://codesandbox.io/s/p2rqmr8qk7)
108256
* [Form Array With Dynamic Controls](https://codesandbox.io/s/nw9wxw2nvl)
109257
* [Update On Submit](https://codesandbox.io/s/3qk1ly16j1)
258+
* [Multi-page Wizard Form](https://codesandbox.io/s/zk1m06r5y3)
110259

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

0 commit comments

Comments
 (0)